this.$router 在 Vue.extend() 方法中未定义

Question

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

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

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

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.