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

Question

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

最小复制link：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() 方法中未定义，因此传递给路由器的路由 - link 不存在.如果我从父组件 (router: self.$router) 传入路由器，则 router-link 元素会按预期安装。

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

Answer 1

通过 new MarkdownContent().$mount(...) 创建一个新的 Vue 实例并安装它，您正在打破 parent/child 关系的正常范式。 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.

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

this.$router is undefined inside Vue.extend() method

vue.js

vue-router

vuejs2