Vue3 路由钩子的使用

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

一、路由钩子解析

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、组件内钩子

  组件内钩子，顾名思义就是在组件中使用的钩子，写在<script>中。包括beforeRouteEnter，beforeRouteUpdate，beforeRouteLeave三个钩子。
  示例代码：

<script setup>
	import { beforeRouteEnter, beforeRouteUpdate. beforeRouteLeave } from 'vue-router' 
	import { ref } from 'vue'
	import axios from 'axios'
	
	const id = ref('')
	const userInfo = ref({})
	const timer = setTimeout(fn,delay)
	const getData = (id) => {
		axios.get(`/api/user/${id}`).then((res) => {
			userInfo = res.data
		})
	}
	const isDirty = () => {
		// ...
	}
	
	beforeRouteEnter((to, from, next) {
    	// 在组件生命周期beforeCreate阶段触发，未创建实例vc
	    console.log('组件内路由前置守卫 beforeRouteEnter', this) // this指向vc
	    next((vm) => {
	    	console.log('组件内路由前置守卫 vm', vm) // vm 是this的原型
	    })
  	})
  	beforeRouteUpdate((to, from, next) => {
	    // 可以访问组件实例 
	    // 重新获取用户信息
		getUserInfo(to.params.id).then(() => next()).catch((err) => next(err))
	})
	beforeRouteLeave((to, from, next) {
	    // 导航离开该组件的对应路由时调用
	    // 可以访问组件实例
	    // 1.1 提示用户是否保存数据 
	    if (this.dialogVisibility === true) {
		    this.dialogVisibility = false //关闭弹出框
		    next(false) //回到当前页面, 阻止页面跳转
		}else if(this.saveMessage === false) {
		    alert('请保存信息后退出!') //弹出警告
		    next(false) //回到当前页面, 阻止页面跳转
		}else {
		    next() //否则允许跳转
		}
		// 1.2 清除当前组件中的定时器
		window.clearInterval(timer) //清楚定时器
  		next()
		// 1.3 保存相关内容到Vuex中或Session中
		localStorage.setItem(name, content); //保存到localStorage中
    	next()
	})
</script>

• beforeRouteUpdate：组件内路由更新前的钩子，可以在路由更新之前执行一些操作，如重新获取数据等。
• beforeRouteLeave：组件内路由离开前的钩子，可以在组件被销毁之前执行一些操作，如提示用户是否保存数据、清除当前组件中的定时器和保存相关内容到Vuex中或Session中等。

二、参数解析

• to: 跳转的目标(要跳转到那个路由组件)；

• from:要离开的路由（其实就是当前组件）；

• next：下一步（这个必须要，除全局后置钩子除外）；

1. next()：正常放行
2. next(false)：不跳转
3. next(router): 进入指定路由 => next(‘./地址’) / next({ path: ,name: , … })

三、钩子输出顺序

  1、当我进入组件时：

• 全局前置钩子beforeEach
• 路由独享钩子beforeEnter
• 组件路由钩子beforeRouteEnter
• 全局解析钩子beforeResolve
• 全局后置钩子afterEach

  2、当我点击跳转其他页面时：

• 组件路由钩子beforeRouteLeave
• 全局前置钩子beforeEach
• 全局后置钩子afterEach