6个事物的顺序

一.四个守卫的执行顺序

1.全局路由守卫的前置 (beforeEach)**

触发时机：
beforeEach 在路由跳转之前触发。它会在任何路由导航发生时被调用，不管是从哪一页面跳转到哪一页面。此时，你可以通过调用 next() 来决定是否允许路由跳转，如果没有调用 next() 或调用 next(false)，导航将被中断。

作用：
它主要用于全局级别的权限控制或其他路由前置操作。

1
2
3
4
5
6
7
8
9
router.beforeEach((to, from, next) => {
    // 权限检查等
    if (to.meta.requiresAuth && !isAuthenticated) {
        next('/login'); // 不允许跳转，跳转到登录页
    } else {
        next(); // 允许跳转
    }
});

2.组件内路由守卫的前置 (beforeRouteEnter)

1
2
3
4
5
6
7
beforeRouteEnter(to, from, next) {
    next(vm => {
        // vm 是当前组件实例
        vm.someMethod();
    });
}

3.全局路由守卫的后置 (afterEach)

触发时机：
afterEach 是路由跳转完成后触发的全局路由守卫。与前置守卫不同，后置守卫不允许中断导航，它的主要作用是用于执行一些导航结束后的任务，如记录日志、发送分析数据等。

作用：
用于路由跳转后的操作，通常用于状态更新、日志记录等。

1
2
3
4
5
router.afterEach((to, from) => {
    // 可以做一些跳转后的操作，例如：
    console.log(`Successfully navigated to ${to.path}`);
});

4.组件内路由守卫的后置 (beforeRouteLeave)

触发时机：
beforeRouteLeave 在组件离开时触发，适用于在离开当前组件前需要做的操作。比如，在表单中未保存的情况下，提示用户是否确认离开。

作用：
用于组件级别的“离开”判断，在跳转到其他页面之前执行。你可以通过阻止路由跳转来防止用户丢失未保存的内容。

1
2
3
4
5
6
7
8
9
beforeRouteLeave(to, from, next) {
    const answer = window.confirm('Are you sure you want to leave without saving?');
    if (answer) {
        next();
    } else {
        next(false); // 阻止跳转
    }
}

二.两个生命周期钩子

1.activated

触发时机：
activated 在路由切换到当前组件时触发。当组件被激活（从失活状态恢复）时，它会被调用。

作用：
它通常用于处理嵌套路由切换时需要恢复或重新加载的数据，或执行与组件相关的任务，比如重新请求数据、恢复组件状态等。

1
2
3
4
5
6
7
8
9
beforeRouteLeave(to, from, next) {
    const answer = window.confirm('Are you sure you want to leave without saving?');
    if (answer) {
        next();
    } else {
        next(false); // 阻止跳转
    }
}

2.deactivated

触发时机：
deactivated 在路由切换到其他组件时触发。当组件被失活（暂时从视图中移除）时，它会被调用。

作用：
它通常用于清理工作，比如停止定时器、移除事件监听器等，以释放资源。

1
2
3
4
5
6
7
export default {
  deactivated() {
    console.log('组件被失活');
    // 可以在这里清理一些资源，如定时器、事件监听等
  }
};

三.路由守卫和生命周期钩子整体的执行顺序

1.全局路由守卫的前置 (beforeEach)

2.组件内路由守卫的前置 (beforeRouteEnter)

3.组件激活钩子 (activated)

4.全局路由守卫的后置 (afterEach)

5.组件内路由守卫的后置 (beforeRouteLeave)

6.组件失活钩子 (deactivated)

原因如下：

  1. **beforeEach**：全局路由守卫的前置会在路由跳转前执行，最先触发，决定是否允许跳转。
  2. **beforeRouteEnter**：组件内路由守卫的前置在路由跳转并且进入组件时执行，紧随全局守卫。
  3. **activated**：当组件被激活时触发，路由跳转至当前组件，紧接着进入组件的生命周期钩子。
  4. **afterEach**：全局路由守卫的后置在路由跳转完成后执行，用于执行路由后的操作。
  5. **beforeRouteLeave**：在组件离开之前执行，确保组件在离开时进行必要的处理。
  6. **deactivated**：组件失活时触发，通常用于清理工作，最后执行。

顺序的逻辑是：路由跳转前（beforeEach）、进入新组件（beforeRouteEnter -> activated）、路由跳转完成（afterEach）、离开当前组件（beforeRouteLeave -> deactivated）。