Vue路由守卫

Vue路由守卫

类别：

1. 全局守卫
2. 组件内守卫
3. 路由独享守卫

一、全局守卫：

1. 概念：
在这个守卫方法中进行全局拦截，可以设置满足某些条件（比如是否登录）
才可以进入到当前路由导向的页面
2. 设置方式：
在main.js（插件入口页面）文件中定义，有以下几个钩子函数方法

router.beforeEach（） 进入路由前执行

router.beforeResolve（）解析守卫：在导航被确认之前，同时在所有组件内的守卫和异步路由组件被解析之后，解析守卫就被调用

router.afterEach（）导航完成时执行，里面只有to和from两个形参，没有next

在这些方法中的括号里都有一个回调函数作为执行器，这个回调函数有三参数，分别是to，from，next
to：这个参数表示要到哪里去
from：表示从哪里来
next使用时要注意逻辑严谨，不然会造成死循环
next ()：这是一个方法，当你设置next（）里面不传值时，表示通行
next（false）当里面传参false时表示禁止通行
next（‘/home’）当里面传的是一个路径时，不管原来导航跳往哪里，都会重定向到此路径
next（error）阻止跳转，执行router.onError()里的回调，需要先注册一个router.onError()

router.onError(error=>{
  console.log('错误信息');
})

next（（）=>{ }）next这里的值可以是一个回调函数，然后在这里设置路径设置重定向，或取消导航，又或者注册一个错误

例子：

new Vue({
  el: '#app',
  router,store,
  components: { App },
  template: '<App/>'
},
router.beforeEach((to,from,next)=>{
  if(to.path=='/'||to.path=='/longe'){
    next();
  }else if(to.path=='/home'){
    alert('请先登录')   }}))

二、组件内守卫

beforeRouteEnter： 进入组件时

在渲染该组件的对应路由被 confirm（确定前） 前调用
不！能！获取组件实例 this，因为当守卫执行前，组件实例还没被创建

beforeRouteUpdate： 组件被复用时调用

在当前路由改变，但是该组件被复用时才调用，
举例：对于一个嵌套路由的路径，在 /foo/1 和 /foo/2 之间跳转的时候， 由于会渲染同样的 foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。如果不加这个钩子，则路由变化时页面检测不到数据变化，这里可以访问组件实例 this

beforeRouteLeave： 离开组件前

导航离开该组件的对应路由时调用，这里可以访问组件实例 this
使用：写在组件的逻辑中
这里使用函数写法

beforeRouteEnter (to, from, next) { 
			  console.log('beforeRouteEnter')
			  next()
			},
beforeRouteUpdate (to, from, next) {
			  console.log('beforeRouteUpdate')
			  next()
			 },
beforeRouteLeave (to, from, next) {
			  console.log('beforeRouteLeave')
			  next()
			}

三、路由独享守卫

beforeEnter: 进入该路由前，必须进入某个路由才会执行

例子： 在路由中进行调用
这里使用函数写法

{path: '/',
      name: 'firstlist',
      component: firstlist,
      beforeEnter(to,from,next){
      console.log('beforeEnter');
      next()}//这里注意加next（）方法，给导航放行