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.component()についてはVue.extend()を交換しましたが、同じ問題が発生しました。私はそれがコンストラクタで呼び出されている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.