Vue路由钩子相关

最新推荐文章于 2023-03-16 20:15:42 发布

Mountain08

最新推荐文章于 2023-03-16 20:15:42 发布

阅读量397

点赞数 1

分类专栏： vue 文章标签： vue vue-router

本文链接：https://blog.csdn.net/Mike_chen2stockings/article/details/127263283

版权

vue 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

路由钩子分为三种情况

全局钩子：beforeEach、afterEach、beforeResolve
单个路由里面的钩子：beforeEnter
组件路由：beforeRouterEnter、beforeRouterUpdate、beforeRouterLeave

全局钩子

beforeEach：全局前置守卫，进入路由之前
beforeResolve：全局解析守卫(2.5.0之后)，在 beforeRouterEnter 调用之后调用
afterEach 全局后置钩子，进入路由之后

路由的三个参数说明

to：将要进入的路由对象
from：将要离开的路由对象
next：这个参数是个函数，且必须调用，否则不能进入路由，否则页面会展示空白

// entry 入口文件 - main.js
import router from './router'
router.beforeEach((to, from, next) => {
   next(); //这玩意儿必须写，不然就锤子了
})

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

router.afterEach((to, from) => {
   // 全局后置钩子函数
})

路由独享守卫

为某些路由单独配置守卫

const router = new VueRouter({
	routes: [
		{
			path: '/test',
			component: RouterTestComponent,
			beforeEnter: (to, from, next) => {
				// 参数用法与全局的钩子是i一样的，调用顺序在全局前置守卫后面，所以不会被全局守卫覆盖
			}
		}
	]
})