Vue Router activated deactivated 路由守卫

在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开发中的重要技术之一。