vue.js中二级路由和三级路由的代码解析
本篇文章给大家带来的内容是关于vue.js中二级路由和三级路由的代码解析 ,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。
为什么要用二级和三级路由?
当项目中 有多个 <router-view> 时,就必须使用分级路由;
如果路由不分级,又有多个 <router-view> ,全部都是定义为一级路由,那么项目中的 <router-view> 的内容显示就会混乱;这是不友好的;
如果对路由进行分级,那么当触发某个二级或三级路由时,此路由就会将对应组件内容传给自己的父级路由组件里面的 <router-view>,这样就不会混乱;
一级路由被触发时,自然会找自己所注册的根组件的<router-view>
二级路由
为一级路由添加一个 children 属性数组,并将二级路由放入;
path 属性 决定 跳转后 url 地址栏的的显示
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
|
三级路由
和二级路由差不多
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
|