Vuejs - ルーターの子供

Question

Vuejsの子供のルートの仕組みを理解しようとしています。 私は、もし私が各ニュースへのリンクを持つニュース概要を持っていたら、子供のルートを使ってニュースアイテムを見ることができると思います。

それは間違っているのですか？

const router = new VueRouter({ 
    routes: [ 
    { 
     path: '/news', 
     name: 'news', 
     component: News, 
     children: [ 
     { 
      path: ':id', 
      name: 'newsitem', 
      component: Newsitem, 
     } 
     ] 
    } 
    ] 
}); 

I have created a jsfiddle to show how I would expect it to work.

私はJavaScriptでルータのコメントを外した場合、それは子供と正常に動作しますが、ありません。

Answer 1

が、私はそれを得た、Vueのルーターは<view-router></view-router>を必要としなければならないが、私はあなたのコードを見て、rootコンポーネントが持っていたされていますが、parentを忘れて、それはあまりにも<view-router></view-router>が必要です。 Moersing.Lin同様

https://jsfiddle.net/v28yw3g5/

Answer 2

あなたのニュースコンポーネントで<router-view>を置くことを忘れてしまったと述べました。ここで

はあなたのフィドルの実施例である：

const News = { 
 
    template: `<div> 
 
<h1>News</h1> 
 
<br><br> 
 
<router-view></router-view> 
 
</div> 
 
` 
 
} 
 
const Newsitem = { 
 
    template: "<h2>News {{this.$route.params.id}}</h2>" 
 
} 
 

 
const router = new VueRouter({ 
 
    routes: [{ 
 
    path: '/news', 
 
    name: 'news', 
 
    component: News, 
 
    children: [{ 
 
     path: ':id', 
 
     name: 'newsitem', 
 
     component: Newsitem, 
 
    }] 
 
    }] 
 
}); 
 

 

 
new Vue({ 
 
    el: '#app', 
 
    router, 
 
}).mount('#app');

<script src="https://unpkg.com/vue/dist/vue.js"></script> 
 
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script> 
 

 
<div id="app"> 
 
    <ul> 
 
    <li> 
 
     <router-link :to="{ name: 'news'}">News list</router-link> 
 
    </li> 
 
    <li> 
 
     <router-link :to="{ name: 'newsitem', params: { id: 'item-1' }}">Item 1</router-link> 
 
    </li> 
 
    <li> 
 
     <router-link :to="{ name: 'newsitem', params: { id: 'item-2' }}">Item 2</router-link> 
 
    </li> 
 
    </ul> 
 
    <router-view></router-view> 
 
</div>