Question

使用vue v2.5.9和vue-router v.3.0.1。

最小复制链接：https://codepen.io/clarewhatever/pen/eyzMNo

我正在尝试使用<router-link>方法将Vue.extend()元素动态插入到组件中。

Vue.component('markdown', {
  name: 'markdown',
  props: {
    routeName: {
      type: String,
      required: true
    },
    routeLabel: {
      type: String,
      required: true
    }
  },
  template: `<span ref="content"></span>`,
  mounted () {
    let self = this;
    let routerLink = `<router-link :to="{ name: ${routeName} }">${routeLabel}</router-link>`;
    let MarkdownContent = Vue.extend({
      template: `<div>${routerLink}</div>`,
      // router: self.$router,
      mounted () {
        // this.$router is undefined unless router is explicitly defined
        console.log(this.$router);
      }
    });
    new MarkdownContent().$mount(this.$refs.content);
  }
});

我遇到的问题是this.$router方法中extend()未定义，因此传递给路由器链接的路由不存在。如果我从父组件（router: self.$router）传入路由器，则router-link元素按预期方式挂载。

我尝试为Vue.extend()换出Vue.component()，但遇到了同样的问题。我认为它必须与在构造函数上调用的vm.$mount方法有关，尽管我不确定它为什么会那样工作。所有文档都显示它以这种方式使用，但我找不到包含vue-router的示例。

Answer 1

通过创建一个新的Vue实例并通过new MarkdownContent().$mount(...)安装它，您正在打破父/子关系的正常范例。 VueRouter插件自动为模板中包含的子组件设置this.$router的引用。但是，通过手动安装组件，您将失去该参考。

为了呈现<router-link>标记而实例化和挂载新组件似乎非常迂回。但是，如果你真的需要这样做，你只需要在组件定义对象中指定router引用：

let MarkdownContent = Vue.extend({
  router,
  template: `<div>${routerLink}</div>`,
  mounted () {
    console.log(this.$router);
  }
});

Here's a working codepen.

这个。$ router在Vue.extend（）方法中是未定义的

1 个答案: