vue3路由导航守卫

Vue3路由导航守卫是一种在路由切换时执行的函数，用于控制路由的访问权限和处理路由切换时的逻辑。Vue3中的导航守卫包括三种类型：beforeRouteEnter、beforeRouteUpdate和beforeRouteLeave。其中，beforeRouteEnter在渲染该组件的对应路由被确认前调用，但是此时无法访问组件实例；beforeRouteUpdate在当前路由改变，但是该组件被复用时调用，可以访问组件实例；beforeRouteLeave在导航离开该组件的对应路由时调用，可以访问组件实例，通常用来禁止用户在还未保存修改前突然离开。在导航守卫中，可以通过next()函数来控制路由的跳转，也可以通过next(false)来取消路由的跳转。

相关问题

vue3 路由导航守卫

Vue3的路由导航守卫与Vue2的路由导航守卫基本相同，但是有一些细微的差别。在Vue3中，可以使用beforeRouteEnter、beforeRouteUpdate和beforeRouteLeave这三个守卫。

1. beforeRouteEnter

beforeRouteEnter守卫在路由进入前被调用。在这个守卫中，访问不到组件实例，因此需要使用next函数来传递组件实例。

const routes = [
  {
    path: '/user/:id',
    component: User,
    beforeRouteEnter(to, from, next) {
      // 在这里访问不到组件实例
      next(vm => {
        // 通过next函数传递组件实例
        vm.getUserInfo()
      })
    }
  }
]

2. beforeRouteUpdate

beforeRouteUpdate守卫在路由更新时被调用，在该守卫中可以访问到组件实例，可以在此更新组件数据。

const routes = [
  {
    path: '/user/:id',
    component: User,
    beforeRouteUpdate(to, from, next) {
      // 在这里可以访问到组件实例
      this.getUserInfo()
      next()
    }
  }
]

3. beforeRouteLeave

beforeRouteLeave守卫在路由离开时被调用。可以在该守卫中进行一些操作，例如提示用户是否离开页面。

const routes = [
  {
    path: '/user/:id',
    component: User,
    beforeRouteLeave(to, from, next) {
      if (confirm('确定离开页面吗？')) {
        next()
      } else {
        next(false)
      }
    }
  }
]

vue3 路由导航守卫使用

在 Vue3 中，路由导航守卫使用方式与 Vue2 有些不同。

首先，在创建 Vue Router 实例时，需要使用 `createRouter` 方法而非 `new VueRouter` 方法。

import { createRouter, createWebHistory } from 'vue-router'

const router = createRouter({
  history: createWebHistory(),
  routes: [...]
})

接下来，在路由配置中，使用 `beforeRouteEnter`、`beforeRouteUpdate` 和 `beforeRouteLeave` 代替 Vue2 中的 `beforeRouteEnter`、`beforeRouteUpdate` 和 `beforeRouteLeave` 钩子函数。

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home,
    beforeRouteEnter(to, from, next) {
      // 在进入路由前执行
      next()
    },
    beforeRouteUpdate(to, from, next) {
      // 在路由更新前执行
      next()
    },
    beforeRouteLeave(to, from, next) {
      // 在离开路由前执行
      next()
    }
  },
  // ...
]

需要注意的是，在 Vue3 中，`beforeRouteEnter` 钩子函数不能直接访问组件实例（`this`），需要使用回调函数来访问。

beforeRouteEnter(to, from, next) {
  next(vm => {
    // 在进入路由后执行，可以访问组件实例
    console.log(vm)
  })
}

另外，`beforeRouteUpdate` 钩子函数只有在路由参数发生变化时才会触发。

完整示例：

import { createRouter, createWebHistory } from 'vue-router'

const Home = { /* ... */ }

const About = { /* ... */ }

const router = createRouter({
  history: createWebHistory(),
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home,
      beforeRouteEnter(to, from, next) {
        console.log('beforeRouteEnter')
        next()
      },
      beforeRouteUpdate(to, from, next) {
        console.log('beforeRouteUpdate')
        next()
      },
      beforeRouteLeave(to, from, next) {
        console.log('beforeRouteLeave')
        next()
      }
    },
    {
      path: '/about',
      name: 'About',
      component: About
    }
  ]
})

export default router