vue-router实例

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开发项目的同行们。