如何设置子路由

Question

我试图弄清楚 VueJS 中的子路由是如何工作的。我认为，如果我有一个新闻概述，其中包含每个新闻项目的链接，那么我可以使用子路由来查看新闻项目，但它并不像我预期的那样工作。

到底是我做错了还是？

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

我创建了一个 jsfiddle 来展示我期望它如何工作。

如果我在 JavaScript 中取消注释路由器，那么它可以正常工作，但不能用于儿童。

Answer 1

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

Answer 2

我明白了，需要一个 Vue Router

<router-view></router-view>

，但是在你的代码中，

root

组件在那里，但你忘记了

parent

，它也需要一个

<router-view></router-view>

。

https://jsfiddle.net/v28yw3g5/

Answer 3

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>