Vue Router duplicate $ルート情報

Question

私はこれらのようなルートとサブルートを持っています。

export default new Router({ 
    routes: [ 
    { 
     path: '/user', 
     component: UserView, 
     meta: {title: 'User Manager'}, 
     children: [ 
     {path: 'editor', component: EditorView, meta: {title: 'User Editor'}} 
     ] 
    } 
    ] 
}) 

UserViewで

とEditorView両方の機能を搭載しています。

export defaults { 
    mounted() { 
    console.log(this.$route) 
    } 
} 

と私は二回$routeデータ、ブラウザでコンソール印刷をhttp://host:port/#/user/editorを入力し、それらが同じオブジェクトです。どうすればUserView経路データを取得できますか？

{name: undefined, meta: {…}, path: "/user/editor", hash: "", query: {…}, …} 
{name: undefined, meta: {…}, path: "/user/editor", hash: "", query: {…}, …} 

UserViewとEditorView同じページ内にあり、彼らはこの絵のように見えるのhtml。

Answer 1

ネストされたルートが関係する場合、特定のURLに一致する複数のルート部分があります。あなたはあなたが興味のある特定のルートのためthis.$route.matchedを検索する必要があります

はあなたが興味を持っているルートの名前を設定した場合、それは簡単に見つけること作ります：

{ 
    path: 'editor', 
    name: 'editor', // <-- Add this 
    component: EditorView, 
    meta: { 
    title: 'User Editor' 
    } 
} 

mounted() { 
    const route = this.$route.matched.find(r => r.name === 'editor'); 
    console.log(route.meta.title); 
}