Vue的路由守卫

Vue路由守卫

Vue的路由，简单来说 主要提供的是组件间互相跳转的帮助；例如从首页跳转到设置页····

路由守卫——作用就在于监听组件间互相跳转的时候，也可以理解为拦截；例如从首页跳转到设置页时，路由守卫会监听到页面来自首页，目标页面是设置页。

路由守卫分为全局守卫、独享守卫、组件内的守卫

！以下示例代码是在vue脚手架创建的项目中使用的 ！

全局守卫

全局，顾名思义是指的整个项目，全局守卫监听的是整个项目的路由

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'Home1',
    component: Home
  },
  {
    path: '/about',
    name: 'About2',
    component: () => import('../views/About.vue'),
  }
]

const router = new VueRouter({
  routes
})

//全局路由守卫
//前置守卫
router.beforeEach((to,from,next)=>{
  console.log("to是目标组件",to);
  console.log("from是来自哪个组件",from);
  console.log("next是一个函数，是前置守卫有的，用户控制是否跳转，执行next，守卫就会放行，不使用next守卫就会将路由卡在这里，这时候页面呈现白色");
  //next()的参数是组件的路径，例如/about，next('/about')强制跳转至路径为/about的组件；如果不填则是放行
  next()//使用next函数放行
})
//后置守卫,后置守卫没有next函数，因为路由已经去到对应的组件了
router.afterEach((to,from)=>{
  console.log("to是目标组件",to);
  console.log("from是来自哪个组件",from);
})

export default router

独享守卫

独享守卫指的是在单个路由中存在的守卫

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'Home1',
    component: Home
  },
  {
    path: '/about',
    name: 'About2',
    component: () => import('../views/About.vue'),
    //独享守卫,独享守卫也有next
    beforeEnter: (to, from, next) => {
      console.log("to是目标组件",to);
 	  console.log("from是来自哪个组件",from);
 	   //next()的参数是组件的路径，例如/about，next('/about')强制跳转至路径为/about的组件；如果不填则是放行
      next();
    },
  }
]

const router = new VueRouter({
  routes
})

export default router

组件内的守卫

组件内的守卫不同于全局或者独享守卫；组件内守卫是存在与组件中的，它与mounted等钩子函数类似，作用于单个组件

组件内守卫的也有to,from,next入参,并且组件内守卫是无法使用this的

<template>
  <div class="about">
    <h1 ref="h1">This is an about page</h1>
  </div>
</template>

<script>
export default {
  data(){
    return{
      
    }
  },
  mounted(){
    
  },
  //进入组件前调用
  beforeRouteEnter (to, from, next) {
      console.log("to是目标组件",to);
 	  console.log("from是来自哪个组件",from);
      next();
  },
  //离开组件前调用
  beforeRouteLeave (to, from, next) {
     console.log("to是目标组件",to);
 	 console.log("from是来自哪个组件",from);
     next()
  },
  //组件复用时会调用
  beforeRouteUpdate(to, from, next){
     console.log("to是目标组件",to);
 	 console.log("from是来自哪个组件",from);
     next()
  },
}
</script>

最后要注意的是，路由的执行顺序

大概顺序是 全局路由守卫——》独享路由守卫——》组件内守卫；
具体顺序是=》全局路由守卫的beforeEach——》独享守卫beforeEnter——》组件内守卫beforeRouteEnter——》全局守卫afterEach——》created等组件的钩子函数