vue2 与vue3路由守卫区别

在Vue2中，路由守卫是通过全局的导航守卫函数来实现的，包括`beforeEach`、`beforeResolve`和`afterEach`等。这些守卫函数可以在路由跳转前、解析前和跳转后执行特定的逻辑。

而在Vue3中，引入了Composition API，路由守卫的使用也有所不同。Vue-Router在Vue3中提供了两个Composition API用于路由守卫，即`onBeforeRouteLeave`和`onBeforeRouteUpdate`。这两个函数只能在`setup`函数中使用，并且可以在组件内部实现相应的逻辑。

举个例子，比如在Vue2中，可以使用`beforeEach`全局导航守卫函数来进行路由跳转前的验证。而在Vue3中，可以使用`onBeforeRouteLeave`来实现类似的功能。具体代码如下：

Vue2中的全局导航守卫：

router.beforeEach((to, from, next) => {
  // 验证逻辑
  if (to.meta.requiresAuth && !isAuthenticated) {
    next('/login');
  } else {
    next();
  }
});

Vue3中的路由守卫使用Composition API：

import { onBeforeRouteLeave } from 'vue-router';

export default {
  setup() {
    onBeforeRouteLeave((to, from) => {
      // 验证逻辑
      if (to.meta.requiresAuth && !isAuthenticated) {
        router.push('/login');
      }
    });
  }
}

总的来说，Vue2和Vue3的路由守卫都实现了类似的功能，但在使用方式和语法上有所区别。Vue2使用全局导航守卫函数，而Vue3使用Composition API中的`onBeforeRouteLeave`和`onBeforeRouteUpdate`函数来实现路由守卫。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* [vue 路由缓存 路由嵌套 路由守卫 监听物理返回操作](https://download.csdn.net/download/weixin_38739950/12924360)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"]
- *2* [vue2 和 vue3 的 路由守卫](https://blog.csdn.net/lzfengquan/article/details/125403486)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"]
- *3* [vue2.0 实现导航守卫（路由守卫）](https://download.csdn.net/download/weixin_38692969/13659362)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"]
[ .reference_list ]