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

我得到了它，A Vue的路由器必須需要一個<view-router></view-router>，但我看到你的代碼，該root成分有，但你忘了parent，這是需要一個<view-router></view-router>了。

https://jsfiddle.net/v28yw3g5/

Answer 2

就像Moersing.Lin說你忘了把一個<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>