7.vue-router的子路由嵌套

光是一级路由是满足不来日常使用的，例如 点击 和 登陆,两个路由下面分别还要对应各自的 子路由 ，这就是它存在的意义

目录简略：

子组件挂载2.jpg

导入 父 和 子 组件:
前面的操作就不提了，重要的写

父组件
import login from './comp/login.vue'
import regist from './comp/regist.vue'
子组件
import loginSon from './comp/son/loginSon.vue'
import registSon from './comp/son/registSon.vue'

路由模块 中添加 子路由

const router = new VueRouter({
    routes:[
        //redirect 设置默认显示的组件
        // { path: '/', redirect: '/src/comp/regist' },
        {
            path:'/src/comp/login.vue',
            component:login,
            children:[
                {path:'/src/comp/son/loginSon.vue',component:loginSon},
                {path:'/src/comp/son/registSon.vue',component:registSon},
            ]
        },
        {path:'/src/comp/regist.vue',component:regist}
    ]
})

子组件挂载到 对应的父组件上去
loginSon.vue挂载到login.vue上：

<template>
  <div>
    <router-link to="/src/comp/son/loginSon.vue">登陆</router-link>
    <router-link to="/src/comp/son/registSon.vue">注册</router-link>
    <router-view></router-view>
  </div>
</template>

子组件挂载.jpg

下面是另一种的路由设置(推荐)

 <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
                  <router-link to="/home/NewsList.vue">
                        <img src="../../../images/menu1.png" alt="">
                            <div class="mui-media-body">新闻资讯</div>
                  </router-link>
</li>

import home from './comp/Tabbar/home.vue'
import person from './comp/Tabbar/person.vue'
import set from './comp/Tabbar/set.vue'
import shopcar from './comp/Tabbar/shopcar.vue'
//导入的子组件
import NewsList from './comp/NewList/newList.vue'

// 4.创建路由模块
const router = new VueRouter({
    routes:[
        // 重定向
        {path:'/',redirect:'/home'},
        {path:'/home.vue',component:home},
             {path:'/home/NewsList.vue',component:NewsList},
        {path:'/person.vue',component:person},
        {path:'/set.vue',component:set},
        {path:'/shopcar.vue',component:shopcar},
    ],
    linkActiveClass:'mui-active'
})