Vue.use(Router) export default new Router({ routes: [ { path:'/manager', name:'login', component:Login, beforeEnter:(to,from,next)=>{ let token=sessionStorage.getItem("token"); if(token){ next("/manager/home"); }else{ next(); } } }, { path: '/manager/home', name: 'frames', component: FrameSets, redirect:'/manager/home/arts', beforeEnter:(to,from,next)=>{ let token=sessionStorage.getItem("token"); if(token){ next(); }else{ next("/manager"); } }, children:[ { path:'arts', name:'arts', component:Empty, redirect:'/manager/home/arts/articals', children:[ { path:'articals', name:'articals', component:Empty, redirect:"/manager/home/arts/articals/list", children:[ {path:"list",name:'list',component:Articals}, {path:"addartical",name:"addartical",component:addArtical} ] }, { path:'arttypes', name:'arttypes', component:artTypes }, { path:'artlabels', name:'artlabels', component:artlabels } ] } ] } ] })
对应的项目界面如下:
这个路由配置里面通过beforeEnter的路由守卫来判断是应该跳到登录页面,还是管理系统页面。
{ path:'/manager', name:'login', component:Login, beforeEnter:(to,from,next)=>{ let token=sessionStorage.getItem("token"); if(token){ next("/manager/home"); }else{ next(); } } },
其中的next方法我们可以通过传参跳到相应的路由。
其中我们可以通过一个empty空路由来和redirect选项,来让系统菜单充分利用vue-router的"router-link-active"样式来让菜单获得选中样式。
<template> <router-view></router-view> </template>
empty组件可以如上就行。这样一个菜单下面如果有列表,新增,编辑等组件页面,就可以通过empty对应的路由作为菜单的路由连接,通过redirect属性让菜单点中时跳到列表组件页面。
{ path:'articals', name:'articals', component:Empty, redirect:"/manager/home/arts/articals/list", children:[ {path:"list",name:'list',component:Articals}, {path:"addartical",name:"addartical",component:addArtical} ] },
像上面这样配置,而菜单的连接就可以写成:
<el-menu-item index='1' route='/manager/home/articals'> <i class="fa fa-leaf"></i> <span slot="title">博文管理</span> </el-menu-item>
这种路由配置方式,在通过vue和vue-router开发大型管理系统时的一种最优配置方式。
这种方式配置也是在实际开发中摸索出来一种最简便的配置方式,希望能帮到正在使用vue开发项目的同行们。