在Vue.js应用程序中，Vue Router是一个重要的库，用于管理应用程序的路由。Vue Router提供了一些路由守卫，这些守卫允许我们在导航过程中执行一些操作。其中，activated和deactivated路由守卫是在路由切换时触发的两个关键守卫。本文将深入探讨这两个守卫的知识点和用法。
1. 什么是activated和deactivated路由守卫？
在Vue Router中，activated和deactivated是两个钩子函数，用于处理路由的激活和停用。它们允许我们在路由切换时执行一些操作，比如数据的加载和卸载、动画效果的处理等。下面我们来看一下它们的具体作用：
activated路由守卫：当导航到该路由时触发。在activated守卫中，我们通常会执行一些需要在路由激活时进行的操作，比如数据的加载、页面的初始化等。
deactivated路由守卫：当离开该路由时触发。在deactivated守卫中，我们通常会执行一些需要在路由停用时进行的操作，比如数据的保存、页面的清理等。
2. 使用activated和deactivated路由守卫
下面我们通过代码示例来演示如何在Vue Router中使用activated和deactivated路由守卫。
首先，我们需要在路由配置中定义这两个守卫：
javascript
const router = new VueRouter({routes: [{path: '/home',component: Home,// 定义activated和deactivated守卫beforeEnter: (to, from, next) => {// 在路由激活时执行的操作console.log('Entering Home Route');next();},beforeLeave: (to, from, next) => {// 在路由停用时执行的操作console.log('Leaving Home Route');next();}},// 其他路由配置]
});
在上面的示例中，我们定义了一个名为Home的路由，并在该路由配置中添加了beforeEnter和beforeLeave守卫。在这些守卫中，我们分别输出了一条日志，用于演示守卫的触发时机。
接下来，我们可以在组件中使用这些守卫：
javascript
export default {activated() {// 在路由激活时执行的操作console.log('Component Activated');},deactivated() {// 在路由停用时执行的操作console.log('Component Deactivated');}
}
在上面的示例中，我们在Vue组件中定义了activated和deactivated生命周期钩子函数，并在这些函数中分别输出了一条日志。这样，当路由激活或停用时，这些函数就会被调用。
3. 实际应用场景
activated和deactivated路由守卫在实际项目中有着广泛的应用场景，其中一些常见的用法包括：
数据加载和卸载：在activated守卫中加载组件所需的数据，在deactivated守卫中卸载数据，以优化页面性能和用户体验。
页面初始化和清理：在activated守卫中进行页面的初始化操作，比如表单的重置、状态的初始化等，在deactivated守卫中进行页面的清理操作，比如取消订阅、清除定时器等。
动画效果的处理：在activated和deactivated守卫中分别添加动画效果，以实现页面切换时的过渡效果，提升用户体验。
4.组件内路由守卫的用法
<template><h2>我是About组件的内容</h2>
</template><script>export default {name:'About',// 通过路由规则，离开该组件时被调用beforeRouteEnter (to, from, next) {console.log('About--beforeRouteEnter',to,from)if(localStorage.getItem('school')==='atguigu'){next()}else{alert('学校名不对，无权限查看！')}},// 通过路由规则，离开该组件时被调用beforeRouteLeave (to, from, next) {console.log('About--beforeRouteLeave',to,from)next()}}
</script>
结论
通过本文的介绍，我们深入了解了Vue Router的activated和deactivated路由守卫的知识点和用法。这两个守卫允许我们在路由切换时执行一些操作，比如数据的加载和卸载、页面的初始化和清理、动画效果的处理等。合理地使用activated和deactivated路由守卫，可以提高应用程序的性能和用户体验，是Vue.js开发中的重要技术之一。
