Vuejs - routeur enfants

Im essayant de comprendre comment les enfants des routes dans Vuejs œuvres.
Je pense que si j'avais eu un aperçu nouvelles avec des liens vers chaque news, je pourrais alors utiliser un des enfants de l'itinéraire pour afficher l'article de nouvelles, mais il ne fonctionne comme je l'attend.

Est-ce moi qui est fais mal ou?

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

J'ai créé un jsfiddle pour montrer comment je m'attends à ce que cela fonctionne.

Si je dé-commenter le routeur dans le javascript, puis il fonctionne très bien, mais pas avec des enfants.

InformationsquelleAutor Martin | 2017-03-07
  1. 4

    Comme Moersing.Lin a dit vous avez oublié de mettre un <router-view> dans de Nouvelles de votre Composant.

    Voici un exemple de travail de votre violon:

    JS:

    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');

    HTML:

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

    • Moersing.Lin a parlé d'un <view-router>
    InformationsquelleAutor Sebastian
  2. 3

    Je l'ai eu, Une Vue Routeur est nécessaire <view-router></view-router>,mais dans ton code, Le root composant est là, mais vous avez oublié le parent,il a besoin d'un <view-router></view-router> trop.

    https://jsfiddle.net/v28yw3g5/

    InformationsquelleAutor Moersing.Lin