嵌套路由

路由规则

import VueRouter from "vue-router";
import About from "../views/About.vue"
import Home from "../views/Home.vue"
import Message from "../views/Message.vue"
import News from "../views/News.vue"
// 创建并暴露一个路由器
export default new VueRouter({
 routes: [{//一路径对应一组件
 	path: '/About',
 	component: About
   },{
 	path: '/Home',
 	component: Home,
       //表示二级路由
 	children: [{//二级路由地址前面不能加/
 		path: 'Message',
 		component: Message,
        },{
 		path: 'News',
 		component: News,
        },{//重定向，如果在Home路由，默认展示二级路由Message
 		path: '/Home',
 		redirect: "/Home/Message",
        }]
    }]
})

页面运用路由

<template>
 <div class="Home">
 	<router-link class="list-group-item" active-class="active" to="/home/News">News</router-link>
  	//二级路由，路径to后面要先父路径再子路径
 	<router-link class="list-group-item" active-class="active" to="/home/Message">Message</router-link>
 	<router-view></router-view>
 </div>
</template>