巢狀路由，即路由中巢狀路由。

下面的例子，舉例商品列表頁面中，通過一個路由檢視商品的標題，再通過一個路由檢視商品的圖片。

我們先定義兩個元件，Title.vue , Image.vue。

下面是Title.vue 

<template>
  <div>
    商品名稱
  </div>
</template>

<script>
export default {
  name: 'Title'
}
</script>

<style scoped>

</style>

Image.vue 就不列出了。

然後，我們修改router/index.js , 給商品列表路由定義子路由。如下。

import Vue from 'vue'
import Router from 'vue-router'
import GoodList from '@/views/GoodList'
import Title from '@/views/Title'
import Image from '@/views/Image'

Vue.use(Router)

export default new Router({
  mode: 'history',
  routes: [{
    path: '/goods',
    name: 'GoodList',
    component: GoodList,
    children: [
      {
        path: 'title',
        name: 'Title',
        component: Title
      }, {
        path: 'image',
        name: 'Image',
        component: Image
      }
    ]
  }]
})
 

然後，再去GoodList.vue 中修改。如下。

<template>
  <div>
    這是商品列表頁
    <span>{{$route.params.goodsId}}</span>
    <br />
    <span>{{$route.params.name}}</span>
    <router-link to="/goods/title">顯示商品標題</router-link>
    <router-link to="/goods/image">顯示商品圖片</router-link>
    <div>
      <router-view></router-view>
    </div>
    
  </div>
</template>

<script>
export default {
  name: 'GoodList'
}
</script>

<style scoped>

</style>
 

Done！