Vue3 路由钩子的使用

  VueRouter提供了一些路由钩子函数,允许开发者在不同的路由生命周期阶段执行自定义逻辑,从而实现更为灵活的路由控制。以下是VueRouter的一些常用路由钩子函数:

Vue3 路由钩子的使用

  • 一、路由钩子解析
    • 1、 全局钩子
    • 2、路由独享钩子
    • 3、组件内钩子
  • 二、参数解析
  • 三、钩子输出顺序

一、路由钩子解析

1、 全局钩子

  全局钩子有三个,包括beforeEach、afterEach和beforeResolve。一般写在router里index.js的路由创建后面。代表对所有路由起作用。
  示例代码:

import { createRouter } from 'vue-router'

const routes = [
]

const router = createRouter({
	routes
})

// 全局前置钩子
router.beforeEach((to,from,next)=>{
	// 如果用户未登录,跳转到登录页
  	if (!isAuthenticated()) {
	    next({
	      path: '/login',
	      query: { redirect: to.fullPath } // 传递重定向参数
	    })
  	} else {
    	next()
  	}
})
// 全局后置钩子
router.afterEach((to,from)=>{
	// 记录用户的浏览记录
  	addHistory(to.fullPath)
})
// 全局解析钩子
router.beforeResolve((to,from,next)=>{})

export default router
  • beforeEach:全局前置钩子,可以在路由跳转之前进行一些校验、权限判断等操作。
  • afterEach:全局后置钩子,可以在路由跳转之后进行一些操作,如记录用户的浏览记录等。
    beforeResolve:全局解析钩子

2、路由独享钩子

  目前它只有一个钩子函数beforeEnter,与beforeEach功能一致,但是区别是beforeEnter只对当前路由起作用。一般写在router里index.js的routes单路由配置中。
  示例代码:

import { createRouter } from 'vue-router'
export default const router = createRouter({
  routes: [
  	{
      	path: '/',
      	name: 'Home',
      	component: import('./views/Home.vue'),
      	beforeEnter: (to, from, next) => {
        	if (!isAuthenticated()) {
		    next({
		    	path: '/login',
		        query: { redirect: to.fullPath }
		    })
    		} else {
      			next()
    		}
    	}
    },
    {
    	path: '/about',
    	name: 'Name',
    	component: import('./views/About.vue')
    }
  ]
})
  • beforeEnter:路由独享的守卫,可以在路由进入之前进行一些校验操作

3、组件内钩子

  组件内钩子,顾名思义就是在组件中使用的钩子,写在

你可能感兴趣的:(vue.js,前端,javascript)