Vue路由嵌套
vue是当前最流行的框架之一，路由也是不可或缺的，怎么样快速搭建路由？在搭建路由路由之前我们需要两个插件（vue.min.js和vue-router.min.js）。
注意：vue-router.min.js一定要在vue.min.js之后。
html部分：
<div id="app">
<div>
<router-link to="/one">第一步，父路由一</router-link><!--第一部分-->
<router-link to="/two">第一步，父路由二</router-link>
</div>
<router-view></router-view><!--显示第二部-->
</div>
<!--创建子路由-->
<template id="one">
<div><!--注意事项子路由里的标签必须用一个大div包裹里面的内容-->
<router-link to="one_a">第二步，子路由one</router-link>
<router-view></router-view><!--显示第三部分-->
</div>
</template>
<template id="two">
<div>
<router-link to="two_a" > 第二步，子路由two </router-link >
<router-view ></router-view >
</div>
</template>
<template id="one_a">
<div><span>这是第三部分的one_a</span></div>
</template>
<template id="two_a" >
<div><span>这是第三部的two_a</span></div>
</template>
在以上的代码中，template标签内必须有一个最大的根元素，是路由切换的内容。
在页面渲染之后router-link标签会成为a标签。
template内的id名必须与js中template名吻合。如：
var one=Vue.extend({
template:"#one"
})
var two=Vue.extend({
template:"#two"
})
var one_a=Vue.extend({
template:"#one_a"
})
var two_a=Vue.extend({
template:"#two_a"
})
此时，我们还需要配置路由：
var router=new VueRouter({
routes:[{
path:'/one',component:one,
children:[//在一级路由中嵌套路由，用children属性
{path:"/one_a",component:one_a}
]},
{path:'/two',component:two,
children:[
{path:"/two_a",component:two_a} ]
}
]
})
最后我们将vue实例化：
var vue=new Vue({
el:"#app",
router:router
})
这样就可以实现一个简单的路由了，我们如果需要显示一个默认组件，在配置路由项是加上：
{path:"*",redirect:"/one"}
好了，现在我们就完成了一个简单的vue路由，相信你一定能学会的！
