Vue中的嵌套路由
router官网-嵌套路由
实际生活中的应用界面，通常由多层嵌套的组件组合而成。同样地，URL 中各段动态路径也按某种结构对应嵌套的各层组件，例如：
<body><div id="app"><h1>欢迎使用路由导航</h1><router-link to="/login">登陆组件</router-link><router-link to="/main">主页组件</router-link><router-view></router-view></div><template id="main"><div><h2>主页组件中的导航菜单</h2><p><router-link to="/main/user">用户组件</router-link><router-link to="/main/emp">员工组件</router-link><router-link to="/main/dept">部门组件</router-link><router-link to="/main/wel">欢迎页</router-link></p><!--嵌套路由出口--><router-view></router-view></div></template><script>var main = {template: '#main'}var login = {template: '<div><h1>登陆界面</h1></div>'}var user = {template: '<div><h1>用户界面</h1></div>'}var emp = {template: '<div><h1>员工界面</h1></div>'}var dept = {template: '<div><h1>部门界面</h1></div>'}var welcom = {template: '<div><h1>欢迎</h1></div>'}var router = new VueRouter({mode: 'history',routes: [{path: '/login', component: login},//父路由，顶级路由{path: '/main',name: 'main',//设置欢迎页：配置一个重定向，并且重定向路径为嵌套路由中的欢迎页路径即可redirect:{name:'wel'},component: main,//嵌套子路由列表children: [/* 嵌套子路由对象* 1.绝对路径：以斜杠开头，此路径就是子路径的真实路径* 用户组件对应的路径：/user* 2.相对路径：不以斜杠开头，此路径的真实路径=父路径+子路径* 用户组件对应的路径：/main/user/{path:'user', name:'user', component: user},{path:'emp', name:'emp', component: emp},{path:'dept', name:'dept', component: dept},{path:'wel', name:'wel', component: welcom}]}]})new Vue({el: '#app',//在Vue对象中注册路由对象router})
</script>
</body>
