web-dev-qa-db-ja.com

Vuejs-ルーターの子

私はVuejsの子供たちのルートがどのように機能するかを理解しようとしています。各ニュースへのリンクを含むニュースの概要があれば、子ルートを使用してニュースアイテムを表示できると思いますが、期待どおりに機能しません。

それを間違っているのは私ですか？

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

jsfiddleを作成して、どのように機能するかを示しました。

Javascriptでルーターのコメントを外すと、正常に動作しますが、子では動作しません。

vue.jsvue-router
4
Martin

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

わかりました、A Vueルーターが必要です<view-router></view-router>、しかしあなたのコードでは、rootコンポーネントがありますが、parentを忘れました、<view-router></view-router>も必要です。

https://jsfiddle.net/v28yw3g5/

2
Moersing.Lin