vue路由守卫用法（vue3 路由守卫）

科技前沿 • 2025-04-14 20:00 • 阅读 49

大家好，我是讯享网，很高兴认识大家。

Vue Router 提供了路由守卫来控制页面的访问权限。在 Vue 3 中，路由守卫的使用方式与 Vue 2 有一些不同。

在 Vue 3 中，我们可以使用 beforeRouteEnter、beforeRouteUpdate 和 beforeRouteLeave 这三个路由守卫来进行页面导航的控制。

beforeRouteEnter：在进入路由之前调用，可以访问组件实例 (this)，但是此时组件实例还未被创建，因此无法访问组件的实例属性和方法。
beforeRouteUpdate：在当前路由改变，但是该组件被复用时调用，可以访问组件实例 (this)，可以根据新的路由参数来更新组件数据。
beforeRouteLeave：在离开当前路由之前调用，可以访问组件实例 (this)，可以进行一些离开前的确认操作。

下面是一个使用路由守卫的示例：

import { createRouter, createWebHistory } from &#39;<em>vue</em>-router&#39;; const router = createRouter({ history: createWebHistory(), routes: [ { path: &#39;/home&#39;, component: Home, beforeEnter: (to, from, next) =&gt; { // 在进入 /home 路由之前执行的逻辑 // 可以在这里进行权限判断等操作 next(); } }, { path: &#39;/profile&#39;, component: Profile, beforeEnter: (to, from, next) =&gt; { // 在进入 /profile 路由之前执行的逻辑 // 可以在这里进行权限判断等操作 next(); } } ] });

讯享网

在上面的示例中，我们定义了两个路由 /home 和 /profile，并分别为它们设置了 beforeEnter 路由守卫。在 beforeEnter 中，我们可以根据需要进行权限判断等操作，并通过调用 next() 方法来继续导航。

注意，这里的示例只涉及到了全局前置守卫，还有其他类型的守卫，如组件内的守卫和全局后置守卫等。你可以根据具体需求选择使用不同类型的守卫来实现路由控制。

vue路由守卫用法（vue3 路由守卫）

相关推荐