Vue路由守卫

路由守卫就是：

比如说，当点击商城的购物车的时候，需要判断一下是否登录，如果没有登录，就跳转到登录页面，如果登陆了，就跳转到购物车页面，相当于有一个守卫在安检

路由守卫有三种：

1：全局钩子： beforeEach、 afterEach
2：独享守卫（单个路由里面的钩子）： beforeEnter、 beforeLeave
3：组件内守卫：beforeRouteEnter、 beforeRouteUpdate、 beforeRouteLeave

全局守卫

router.beforeEach() 进入之前触发

router.afterEach() 进入之后触发

每个守卫方法接收三个参数：

①to: Route: 即将要进入的目标路由对象（to是一个对象，是将要进入的路由对象，可以用to.path调用路由对象中的属性）

②from: Route: 当前导航正要离开的路由

③next: Function: 这是一个必须需要调用的方法，执行效果依赖 next 方法的调用参数

什么时候用路由守卫?  

beforeRouteEnter,  beforeEnter, beforeEach, 这三个都是路由进入之前的守卫,  这些路由守卫常用于做登录认证, 在这里判断用户是否已经登录, 如果已经登录,调用next()允许进入, 如果没有登录, 不调用next(),禁止进入   主要针对一些需要登录状态才能访问的页面, 如: 个人信息页

beforeRouteLeave  是路由离开之前的守卫, 在一些表单页面, 在这个函数中提示, 离开页面, 填写的表单信息会丢失    如: 在线测试页面, 测试提交之前, 不允许离开这一页

beforeRouteUpdate 是路由更新时调用的钩子函数, 当路由路径来源和目标相同(当前页跳转当前页),并且参数不同时, 会调用这个钩子,  常用于搜索页, 当搜索关键字改变时, 在这里更新数据

使用路由守卫需要注意哪些问题? 

(1) 由于在任何组件中都能使用this.$router, 所以全局路由守卫可以在任意组件中调用

(2) beforeRouteEnter路由进入之前,组件还未创建,打印this是undefined, 如果想用组件对象,可以在next()的回调中拿到组件对象   next( vm=>{ console.log(vm)  })

(3) this.$router 是/src/router/index.js中创建的路由对象, 全局唯一, 用于编程式导航跳转和全局路由守卫
    this.$route  是路由跳转的信息对象, 每一个路由对应一个$route对象, 用于路由传值和路由监听

 路由监听和路由守卫的区别: 

路由监听: 在组件中watch字段中监听$route, 实现路由监听, 只能监听路由变化, 不能修改路由和限制路由跳转
路由守卫: 使用路由钩子函数实现守卫, 路由守卫不止可以监听路由, 还能控制路由跳转 

当路由跳转时, 跳转的路径和参数与当前完全一致, 没有变化, 不会调用路由钩子函数, 会报错NavigationDuplicated: Avoided redundant navigation to current location: "/about?page=5".

解决方案如下:

在/src/router/index.js中添加如下代码:  原理是捕获push函数报错, 不抛出错误

const originalPush = VueRouter.prototype.push
VueRouter.prototype.push = function push(location) {
  return originalPush.call(this, location).catch(err => {
    //throw(err) // 抛出错误,控制台会显示错误信息, 如果不抛出,控制台不会报错
    return err;
  })
}

【路由守卫写在main.js文件，或者写在router文件夹下的index.js文件】

① 前置路由守卫（每次切换前被调用）

首先先在需要配置路由守卫的地方加上 meta: { isAuth: true }

{

path: '/',

name: 'Home',

component: () => import('../views/Home.vue'),

meta: { isAuth: true, title:'主页' },

},


//全局前置路由守卫————初始化的时候被调用、每次路由切换之前被调用

router.beforeEach((to, from, next) => {

//如果路由需要跳转

if (to.meta.isAuth) {

//判断 如果school本地存储是qinghuadaxue的时候，可以进去

if (localStorage.getItem('school') === 'qinghuadaxue') {

next() //放行

} else {

alert('抱歉，您无权限查看！')

}

} else {

// 否则，放行

next()

}

})

② 后置路由守卫（每次切换后被调用）

是路由跳转之后执行的事件，可以用作跳转路由后更改网页名

首先路由的meta需要配置title的名字

③ 独享路由守卫（某一个路由所单独享用的路由守卫）

独享路由守卫只有前置没有后置

{

path: '/',

name: 'Home',

component: () => import('../views/Home.vue'),

meta: { isAuth: true },

beforeEnter: (to, from, next) => {

if (to.meta.isAuth) { //判断是否需要授权

if (localStorage.getItem('school') === 'qinghuadaxue') {

next() //放行

} else {

alert('抱歉，您无权限查看！')

}

} else {

next() //放行

}

}

},

④ 组件内守卫（某一个路由所单独享用的路由守卫）

独享路由守卫只有前置没有后置，直接写在.vue文件中

//通过路由规则，进入该组件时被调用

beforeRouteEnter(to,from,next) {

if(toString.meta.isAuth){

if(localStorage.getTime('school')==='qinghuadaxue'){

next()

}else{

alert('学校名不对，无权限查看！')

}

} else{

next()

}

},


//通过路由规则，离开该组件时被调用

beforeRouteLeave(to,from,next) {

next()

}