Im tratando de averiguar cómo los niños de las rutas en Vuejs obras.
Yo creo, que si yo tuviera un resumen de noticias con enlaces a cada noticia, a continuación, podría utilizar un niños de ruta para ver la noticia, pero no funciona como yo espera.

Es lo que me está haciendo mal o que?

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

He creado un jsfiddle para mostrar cómo iba a esperar a que funcione.

Si me elimine el router en el javascript, entonces funciona bien, pero no con niños.

InformationsquelleAutor Martin | 2017-03-07

2 Comentarios

  1. 4

    Como Moersing.Lin dijo que se le olvidó poner un <router-view> en sus Noticias Componente.

    Aquí es un ejemplo de trabajo de su violín:

    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 se habló de una <view-router>

Dejar respuesta

Please enter your comment!
Please enter your name here