在Vue.js中，路由护卫（Route Guards）是用于在路由跳转之前履行代码的一种机制。这能够用于查看用户是否现已登录、是否有权限拜访某个页面，或许履行其他需求在路由跳转之前完结的操作。

Vue.js供给了三种路由护卫：大局护卫、路由独享护卫和组件内护卫。

1. 大局护卫：作用于一切路由。2. 路由独享护卫：只作用于特定的路由。3. 组件内护卫：作用于组件内部。

下面是每种护卫的示例代码：

1. 大局护卫

大局护卫能够在路由装备之前或之后履行，例如：

```javascript// main.js 或 router/index.jsimport Vue from 'vue'import Router from 'vuerouter'import store from './store' // 引进Vuex store

Vue.use

const router = new Router

// 大局前置护卫router.beforeEach => { // 查看是否需求登录 if qwe2 { if { next // 已登录，持续路由跳转 } else { next // 未登录，重定向到登录页面 } } else { next // 不需求登录，持续路由跳转 }}qwe2

// 大局后置钩子router.afterEach => { // 能够在这里记载日志或履行其他操作}qwe2

export default router```

2. 路由独享护卫

路由独享护卫能够在特定路由的装备中运用：

```javascriptconst router = new Router => { if { next // 是管理员，持续路由跳转 } else { next // 不是管理员，重定向到登录页面 } } } qwe2}qwe2```

3. 组件内护卫

组件内护卫能够在组件内部运用：

```javascriptexport default { beforeRouteEnter { // 在烘托该组件的对应路由被 confirm 前调用 // 不！能！获取组件实例 `this` // 因为当护卫履行前，组件实例还没被创立 }, beforeRouteUpdate { // 在当前路由改动，可是该组件被复用时调用 // 举例来说，关于一个带有动态路由的视图 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时分， // 因为会复用同一个 Foo 组件实例，因而组件实例会被更新 }, beforeRouteLeave { // 导航脱离该组件的对应路由时调用 // 能够拜访组件实例 `this` }}```

这些护卫能够结合运用，以满意不同的需求。例如，你能够运用大局护卫来查看用户是否已登录，然后运用路由独享护卫来查看用户是否有拜访特定页面的权限。

Vue路由护卫：深化了解与实战运用

在Vue.js中，路由护卫（Route Guards）是一种强壮的机制，它答应咱们在路由跳转过程中履行一些逻辑判别，然后操控用户的拜访权限、数据加载、页面跳转等。本文将深化探讨Vue路由护卫的概念、类型、用法以及实战运用。

什么是路由护卫？

路由护卫是Vue Router供给的一种机制，用于在路由跳转前后履行某些操作。它能够让咱们在用户拜访特定路由之前，进行权限验证、数据加载、页面跳转等操作，然后进步运用的健壮性和用户体会。

路由护卫的类型

Vue Router供给了三种类型的路由护卫，分别是大局护卫、路由独享护卫和组件内护卫。

1. 大局护卫

大局护卫作用于整个运用，每次路由跳转都会触发。它包含以下三种护卫：

- beforeEach：在路由行将改动前调用，能够用来进行权限验证、数据加载等操作。

- beforeResolve：在路由解析之前调用，通常在beforeEach之后调用（Vue Router 3.1.0 新增）。

- afterEach：在路由现已改动后调用，能够用来进行页面跳转、记载日志等操作。

2. 路由独享护卫

路由独享护卫只作用于某个特定路由，能够在路由装备中界说。它包含以下两种护卫：

- beforeEnter：在进入路由前调用，能够用来进行权限验证、数据加载等操作。

- beforeResolve：在路由解析之前调用，通常在beforeEnter之后调用（Vue Router 3.1.0 新增）。

3. 组件内护卫

组件内护卫作用于组件实例，能够在组件内部界说。它包含以下三种护卫：

- beforeRouteEnter：在路由进入组件前调用，此刻组件实例还未创立。

- beforeRouteUpdate：在路由更新（但组件复用）时调用。

- beforeRouteLeave：在导航脱离组件时调用。

路由护卫的实战运用

下面经过一个简略的示例，展现如安在Vue运用中运用路由护卫进行权限验证。

1. 界说路由规矩

首要，咱们需求界说路由规矩，包含路由途径、组件映射联系等。

```javascript

const routes = [

path: '/',

name: 'Home',

component: Home

},

path: '/login',

name: 'Login',

component: Login

},

path: '/admin',

name: 'Admin',

component: Admin,

meta: { requiresAuth: true }

2. 装备大局护卫

接下来，咱们需求装备大局护卫，用于在路由跳转前进行权限验证。

```javascript

router.beforeEach((to, from, next) => {

if (to.matched.some(record => record.meta.requiresAuth)) {

// 判别用户是否登录

if (!isUserLoggedIn()) {

// 假如用户未登录，则重定向到登录页面

next({ path: '/login' });

} else {

// 假如用户已登录，则持续路由跳转

next();

}

} else {

// 假如路由不需求权限验证，则直接持续路由跳转

next();

3. 运用路由护卫

现在，当用户测验拜访需求权限验证的路由时，假如用户未登录，则会主动跳转到登录页面；假如用户已登录，则能够正常拜访。

未经允许不得转载：全栈博客园 » 路由护卫vue, 什么是路由护卫？