路由守卫解析

路由守卫

  生命周期在创建到销毁的过程中执行。
  但是对于每次请求，都会有一部分被限制（登录请求）所以需要路由守卫。

路由全局守卫

全局前置路由守卫

import Vue from 'vue'
import VueRouter from 'vue-router'
import Index from '../components/Index.vue'

Vue.use(VueRouter)

//实例化router对象
const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes,
  linkActiveClass: 'active'
})
router.beforeEach((to,from,next)=>{
	//to是 要去的路由
	//from 从哪里去的
	if(to.path=="/index"){
		return next('/index')//如果要去index这个路由那么下一步就会到index这个路由
	}
	return next()//如果要去的不是index这个路由那么下一步该干嘛干嘛
})

全局解析守卫

与全局前置守卫类似，区别是在导航被确认之前同时所有组件内守卫路由与一步路由组件被解析之后，解析守卫就被调用。
router.beforeResolve

router.beforeResolve((to,from,next)=>){
	return next()
}

全局后置钩子

router.afterEach((to,from)=>{
	console.log("[2021-10-01 15:30:00]"+from.path+"To"+to.path)
	//写日志  2021-10-1 从某个路由到某个路由
})

路由独享守卫

beforeEnter

//在beforeEach之后运行，只单独对一个路由生效 写在路由规则中
const router = [
{
path: "/login",
component: ()=> import("../views/login.vue"),
meta: {
title: "登录"
},
beforeEnter(to,from,next){
if(from.path === "/sf"){ //从/sf这个路由来的就执行下一步否则还在该路由
next()
}else{
next("/sf")
}
console.log("beforeEnter+++++++++++++++++++++++++++++++++++")
console.log(to)
console.log(from)
next()
}
},
.......
{
path: "*",
component: ()=> import("../views/Page_404.vue")
}
] //路由的规则

组件内守卫

beforeRouterEnter
beforeRouterUpdate
beforeRouterLeave
每个组件守卫都有to，from，next三个参数
区别：
beforeRouterEnter 不能获取组件实例this ；实例组件还没有创建好；在渲染该组件的对应路由被confirm前调用；进入组件后就执行一般可以对用户的操作进行限制

beforeRouterUpdate 在当前路由改变 组件被复用时调用；可以访问this；在参数改变时调用同一个组件或路由时调用；在当前路由改变，检测提交的信息是否合法

beforeRouterLeave 导航离开该组件路由是调用；可以访问组件实例this；离开页面没有完成操作时提醒；写某个东西时离开未保存时触发