Vue路由嵌套

vue是当前最流行的框架之一，路由也是不可或缺的，怎么样快速搭建路由？在搭建路由路由之前我们需要两个插件（vue.min.js和vue-router.min.js）。

注意：vue-router.min.js一定要在vue.min.js之后。

html部分：

第一步，父路由一

第一步，父路由二

在以上的代码中，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路由，相信你一定能学会的！