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路由，相信你一定能学会的！