vue-router 嵌套路由

一、改造App.vue的导航代码

    <p>
      导航：
      <!--<router-link :to="'/hi/'+'judy'">hi页面</router-link>-->
      <router-link to="/hi">hi页面</router-link>
      <!--<router-link :to="{name:'hi',params:{username:'judy'}}">hi页面</router-link>-->
      <router-link to="/">首页</router-link>
      <router-link to="/hi/hi2">hi2页面</router-link>
    </p>

二、改写components/hi.vue页面 (使用router-view)

把Hi.vue改成一个通用的模板，加入<router-view>标签，给子模板提供插入位置。“Hi页面1”   和 “Hi页面2”  都相当于“Hi页面”的子页面，有点想继承关系。我们在“Hi页面”里加入<router-view>标签。

<template>
    <div class="hello">
        <h1>{{msg}}</h1>
        <router-view class="aaa"></router-view>
    </div>
</template>
<script type="text/ecmascript-6">
    export default{
        name:'hi',
        data(){
            return{
                msg:'hi,I am judy'
            }
    }

    }
</script>

三、在components目录下新建1个组件模板 hi2.vue 

<template>
    <div class="hello">
        <h1>{{msg}}</h1>
       <!-- <p>{{$route.params.username}}</p>-->
    </div>
</template>
<script type="text/ecmascript-6">
    export default{
        name:'hi',
        data(){
            return{
                msg:'hi,I am hi2页面'
            }
    }

    }
</script>

四、修改router/index.js代码（引入hi2）

import Vue from 'vue'  //引入vue
import Router from 'vue-router' //引入vue-router
import HelloWorld from '@/components/HelloWorld' //引入根目录下HelloWorld组建
import hi2 from '@/components/hi2' //引入根目录下HelloWorld组建

import hi from '@/components/hi'

Vue.use(Router) ; //Vue全局使用Router

export default new Router({
  routes: [  //配置路由，这里是个数组
    {        //每一个链接都是一个对象
      path: '/', //链接路径
      name: 'HelloWorld',  //路由名称
      component: HelloWorld  //对应的组件模版
    },
    {        //每一个链接都是一个对象
      path: '/hi', //链接路径
      name: 'hi',  //路由名称
      component: hi, //对应的组件模版
      children:[
        {path:'/',component:HelloWorld},
        {path:'hi2',component:hi2}
      ]

    }
  ]
})

需要注意的是，在配置路由文件前，需要先用import引入hi2。

总结：

这节课学的内容在路由配置里经常用到，比如我们作一个购物模块，购物模块里有很多相同的元素，我们就会利用这种子路由的形式，先定一个父页面，然后再修改子页面。希望这节课对你有帮助，其实子路由的步骤还是有些繁琐的，所以希望你们多练习几遍，能够完全掌握。