Vuejs - 路由器的孩子

问题描述：

我试图弄清楚Vuejs的儿童路线是如何工作的。我会想，如果我有一个新闻概览，并带有每条新闻的链接，那么我可以使用儿童路线来查看新闻项目，但它并不像我所期望的那样有效。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，然后它工作正常，但与儿童。

答

我得到了它，A Vue的路由器必须需要一个<view-router></view-router>，但我看到你的代码，该root成分有，但你忘了parent，这是需要一个<view-router></view-router>了。

https://jsfiddle.net/v28yw3g5/

答

就像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>

Vuejs - 路由器的孩子

相关推荐