《vue3守卫使用方法》

在Vue3项目开发中，我们经常需要对路由进行一些控制，比如权限校验、页面加载前的准备等，这时候就可以使用路由守卫来解决。接下来将Vue3守卫的使用方法。

1. 简单配置全局前置守卫

在项目的router/index.js文件中进行简单的全局前置守卫配置就能解决问题。这种守卫会在每个路由切换之前执行。

javascript
import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'</p>

<p>const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  // 其他路由
]</p>

<p>const router = createRouter({
  history: createWebHistory(),
  routes
})</p>

<p>// 全局前置守卫
router.beforeEach((to, from, next) => {
  console.log('全局前置守卫');
  // 这里可以做一些通用的逻辑判断
  // 比如权限校验，如果用户没有登录且访问的是非公开页面就跳转到登录页
  // if (!isLogin && to.meta.requiresAuth) {
  //   next({name: 'Login'})
  // }
  next()
})</p>

<p>export default router

2. 组件内的守卫

有时候我们希望针对某个组件单独设置守卫逻辑，可以在组件内部定义守卫。

html

  <div>
    <!-- 组件内容 -->
  </div>
</p>


export default {
  beforeRouteEnter(to, from, next) {
    // 在渲染该组件的对应路由被 confirm 前调用
    // 不能获取组件实例 `this`
    // 因为当钩子执行前，组件实例还没被创建
    console.log('组件内进入守卫');
    next();
  },
  beforeRouteUpdate(to, from, next) {
    // 在当前路由改变，但是该组件被复用时调用
    console.log('组件内更新守卫');
    next();
  },
  beforeRouteLeave(to, from, next) {
    // 导航离开该组件的对应路由时调用
    console.log('组件内离开守卫');
    next();
  }
}


<p>

3. 全局后置钩子

它不会接收next函数也不会改变导航结果，只是用于在导航完成后做一些事情。

javascript
router.afterEach((to, from) => {
console.log('全局后置钩子');
// 可以在这里做页面标题的修改等操作
})


通过以上几种方式，我们就可以根据不同的业务需求灵活地使用Vue3中的路由守卫了，从而更好地控制路由的切换逻辑。