Vue中的路由嵌套

使用children属性实现路由的嵌套

1. 创建模板对象
   .js文件

var father={template:'#temp'}
var frist={template:'<p>第一个</p>'}
var second={template:'<p>第二个</p>'}

.html文件

<template id="temp">
        <div>
            <p>father</p>
            <router-link to="/father/fristc"> fristc</router-link>
            <router-link to="/father/secondc">secondc</router-link>
            <!-- 子路由显示的区域
            一定要加，不然无法显示-->
            <router-view></router-view>
        </div>
    </template>

2. 配置路由对象和注册到Vue实例中

var router=new VueRouter({
    routes:[{path:'/father',
        	component:father,
	        children:[
		        {path:'fristc',component:frist},
		        {path:'secondc',component:second}
		        //注意！！！！
		        //如果这里的path前面加上了一个/，path:'/fristc'
		        //不加/，会以/father作为根路径
		        //那么， <router-link to="/father/fristc">这里的to里面就不需要开头加上/father了
		        //路由跳转时，显示的路径也不会包含/father
		        //!!!但是，会跟父路由之外的其他<router-link>触发，这个子路由，不再是只有父路由能控制
	       ]
	    }]
})
var vm=new Vue({
    el:'#app',
    data:{},
    methods:{},
    router:router
})

3. 在页面中使用路由

<div id="app">
        <router-link to="/father"> 
            一个有孩子的路由
        </router-link>
        <router-view></router-view>
    </div>