vue.js 二级路由/三级路由
为什么要用二级和三级路由?当项目中 有多个 <router-view> 时,就必须使用分级路由;如果路由不分级,又有多个 <router-view> ,全部都是定义为一级路由,那么项目中的 <router-view> 的内容显示就会混乱;这是不友好的;如果对路由进行分级,那么当触发某个二级或三级路由时,此路由就会将
·
为什么要用二级和三级路由?
当项目中 有多个 <router-view> 时,就必须使用分级路由;
如果路由不分级,又有多个 <router-view> ,全部都是定义为一级路由,那么项目中的 <router-view> 的内容显示就会混乱;这是不友好的;
如果对路由进行分级,那么当触发某个二级或三级路由时,此路由就会将对应组件内容传给自己的父级路由组件里面的 <router-view>,这样就不会混乱;
一级路由被触发时,自然会找自己所注册的根组件的<router-view>
二级路由
为一级路由添加一个 children 属性数组,并将二级路由放入;
path 属性 决定 跳转后 url 地址栏的的显示
//main.js
//一级路由
import About from './components/about/About'
//二级路由
import Contact from './components/about/Contact'
import Delivery from './components/about/Delivery'
import History from './components/about/History'
import OrderingGuide from './components/about/OrderingGuide'
const router= new VueRouter({
routes:[
{path:'/about',name:'about',component:About,children:[
{path:'/about/contsssssssssssssssact',name:'contactLink',component:Contact},
{path:'/history',name:'historyLink',component:History},
{path:'/',name:'deliveryLink',component:Delivery},
{path:'/orderingGuide',name:'orderingGuideLink',component:OrderingGuide},
]},
{path:'*',redirect:'/'}
],
mode:"history"
});
三级路由
和二级路由差不多
const router= new VueRouter({
routes:[
{path:'/',name:'home',component:Home},
{path:'/menu',name:'menu',component:Menu},
{path:'/admin',name:'admin',component:Admin},
{path:'/about',name:'about',component:About,redirect: {name:'contactLink'},children:[ //二级路由
{path:'/about/contact',name:'contactLink',component:Contact},
{path:'/history',name:'historyLink',component:History},
{path:'/delivery',name:'deliveryLink',component:Delivery},
{path:'/orderingGuide',name:'orderingGuideLink',component:OrderingGuide,redirect:{name:'phonelink'},children: [ //三级路由
{path:'/phone',name:'phonelink',component:Phone},
{path:'/name',name:'namelink',component:Name}
]},
]},
{path:'/login',name:'login',component:Login},
{path:'/register',name:'register',component:Register},
{path:'*',redirect:'/'}
],
mode:"history"
});
如果您有什么不明白的地方或其它想问的可以关注我的公众号,给我留言,我会尽可能的帮您解决遇到的问题
ps:如果您对摄影感兴趣,也可以关注我的公众号,不定时会分享自己的摄影经验和调色设定,欢迎交流,哈哈哈哈哈
更多推荐
已为社区贡献9条内容
所有评论(0)