随笔集：vue Router的动态路由路径配置及路由守卫

vue Router的动态路由路径配置及路由守卫

vue Router 是 vue官方提供的路由管理器，就是你在地址栏输入什么地址就跳到相对应的页面里去。

动态路由路径

下面是刚新建的router.js内容：

import Vue from 'vue'  //引入的vue对象
import Router from 'vue-router'  //引入router对象
import HelloWorld from '@/components/HelloWorld' //引入页面

Vue.use(Router) //注册插件之后就可以在所有的vue文件中使用路由

export default new Router({ //抛出Router对象
  routes: [
    {
      path: '/',   //路由路径 '/'代表根目录即第一次进入的页面
      name: 'HelloWorld', //路由名称
      component: HelloWorld  //该路径下跳转的页面
    }
  ]
})

我们可以将routes后面的数组用变量 activeRouter 代替，将引入页面操作简化成公共的方法_import_

const _import_ = file => () => import('../view/' + file + '.vue');
export const activeRouter= [
    {
      path: '/',   //路由路径 '/'代表根目录即第一次进入的页面
      name: 'HelloWorld', //路由名称
      redirect: '/dashboard'， //路由重定向页面
      children: [
      	{
	        path: 'dashboard',
	        component: _import_('home'),
	        name: 'Dashboard',
	        meta: { title: '首页', noCache: true }
	      }
      ], //该路由下的子路由与其他路由写法相同
      meta: { title: '登录', noCache: true }, //meta里面包含一些路由其他信息，noCache：禁用缓存
      component: _import_('HelloWorld')//该路径下跳转的页面
    }
  ]
  
export default new Router({ //抛出Router对象
  mode: 'hash', //路由有两种模式：hash模式（默认）和history模式
  base：process.env.BASE_URL,//基路径
  routes: activeRouter，
})

在菜单页面引入便可以直接拿来使用

import { constantRouterMap } from '@/router/routers'

路由守卫

vue守卫分为三种：

1.全局守卫：

前置全局守卫：router.beforeEach((to,from,next)=>{  //进入路由前执行
	//to:到哪去;from:从哪来;next:下一步
	next()
})
后置全局守卫：router.afterEach((to,from)=>{  //导航完成时执行
	//to:到哪去;from:从哪来
})

2.路由守卫：

beforeEnter:(to,from,next)=>{    //进入该路由之前执行
	//to:到哪去;from:从哪来;next:下一步
	next()
}

3.组件守卫：

data(){return {}},
beforeRouteEnter(to,from,next){     //进入组件时执行
    //to:到哪去;from:从哪来;next:下一步
    next()
}

beforeRouteUpdate(to,from,next){  //路由不变，传递的参数改变执行
    //to:到哪去;from:从哪来;next:下一步
    next()
}

beforeRouteLeave(to,from,next){   //离开组件前执行
    //to:到哪去;from:从哪来;next:下一步
    next()
}

注意：next()用来resolve这个钩子,next(false)不让它跳转，next(‘/home’),next({path:‘/home’})

我们可以在全局守卫里面进行拦截一些非法跳转，例如在没有token情况下如果跳转非登录页面就让其跳转登录界面等等不正常路由事件