Vue 嵌套路由（路由中嵌套路由）原理实例讲解

实例：我们打开商品列表页面，一个路由查看商品标题，一个路由查看商品图片，怎么去实现呢？

1、新建 Title.vue子组件：
<template>
  <div>
    这是商品标题子组件
  </div>
</template>

<script>
export default {
  data(){
    return{
      msg: ''
    }
  }
}
</script>

<style>
</style>

2、新建 Image.vue子组件：
<template>
  <div>
    这是商品图片子组件
  </div>
</template>

<script>
export default {
  data(){
    return{
      msg: ''
    }
  }
}
</script>

<style>
</style>

3、修改src/route/index.js文件
import Vue from 'vue'
import Router from 'vue-router'
import GoodsList from '@/views/GoodsList'
// 2、导入子组件
import Title from '@/views/Title'
import Image from '@/views/Image'

Vue.use(Router)

export default new Router({
  mode: 'history',
  routes: [
    {
      	// 1、一级路由
      	path: '/goods',
      	name: 'GoodsList',
      	component: GoodsList,
      	// 2、定义子路由
      	children: [
      		{
      	  		path: 'title',
          	name: 'title',
          	component:Title	
      		},

      		{
      	  	path: 'image',
          	name: 'image',
          	component:Image	
      		}
      	]
    }
  ]
})

4、修改商品列表页面GoodsList.vue文件：
<template>
  <div>
    这是商品列表页面
    浏览器上输入http://localhost:8080/goods
    通过一级路由进入商品列表页面，
    再通过 router-link链接到子路由 /title和 /image下
    <router-link to='/goods/title'>显示商品标题</router-link>
    <router-link to='/goods/image'>显示商品图片</router-link>
    <div>
        // 一定要加<router-view>渲染，否则<router-link>不起作用
        <router-view></router-view>
    </div>
  </div>
</template>

<script>
export default {
  data(){
    return{
      msg: ''
    }
  }
}
</script>

<style>
</style>