2025年vue路由守卫（vue路由守卫有几种）

当你在Vue应用中使用路由时，你可以通过路由守卫来控制页面的访问权限、处理登录状态检查以及在导航发生前后执行一些操作。Vue提供了三种类型的路由守卫：

1. 全局前置守卫：在路由切换开始之前调用。
2. 全局解析守卫：在路由被确认之前调用。
3. 全局后置守卫：在路由切换成功完成之后调用。
4.路由独享守卫：适用于单个路由，用于在进入/离开该路由前后执行特定逻辑。
5.组件内守卫：适用于单个组件，用于在组件内部的路由变化时执行特定逻辑。

下面，我将演示一个简单的Vue组件中的路由守卫案例。假设我们有两个页面：登录页和用户信息页。用户在未登录状态下不能访问用户信息页，只有登录后才能查看用户信息。

首先，确保你已经在Vue项目中安装了`vue-router`，如果没有，请先进行安装：

```bash
npm install vue-router
```

然后，我们来创建一个简单的Vue应用并添加路由守卫：

1. 创建一个Vue实例并设置路由：

```javascript
// main.js
import Vue from 'vue'
import App from 'https://blog.csdn.net/qq_58647634/article/details/App.vue'
import VueRouter from 'vue-router'
import Login from 'https://blog.csdn.net/qq_58647634/article/details/components/Login.vue'
import UserInfo from 'https://blog.csdn.net/qq_58647634/article/details/components/UserInfo.vue'

Vue.use(VueRouter);

const routes = [
{ path: '/login', component: Login },
{ path: '/user-info', component: UserInfo, meta: { requiresAuth: true } }
];

const router = new VueRouter({
routes
});

new Vue({
render: h => h(App),
router
}).$mount('#app');
```

2. 创建两个简单的组件：Login.vue和UserInfo.vue。

```vue

<template>
<div>
<h1>Login Page</h1>
<button @click="login">Login</button>
</div>
</template>

<script>
export default {
methods: {
login() {
// 模拟登录成功后的操作
this.$router.push('/user-info');
}
}
}
</script>
```

```vue

<template>
<div>
<h1>User Information Page</h1>
<p>Welcome to the user info page!</p>
</div>
</template>
```

3. 现在，我们来添加路由守卫，确保只有在登录状态下才能访问用户信息页。

```javascript
// main.js

// ...（之前的代码）

router.beforeEach((to, from, next) => {
const loggedIn = true; // 这里应该根据你的实际登录状态来获取

if (to.matched.some(record => record.meta.requiresAuth) && !loggedIn) {
// 如果需要登录但未登录，重定向到登录页
next('/login');
} else {
// 否则，正常导航
next();
}
});

// ...（之后的代码）
```

在这个例子中，我简单地将`loggedIn`设置为`true`，你应该替换它为你的实际登录状态检查逻辑。当用户尝试访问`/user-info`路径时，路由守卫将会检查用户是否登录，如果未登录，则会重定向到登录页`/login`。一旦登录成功，用户可以访问`/user-info`。

to.matched.some(record => record.meta.requiresAuth) 目的是：

限制某些页面只能被授权用户如(vip)访问，而不是所有人。这时候就可以使用路由导航守卫来实现该功能。如果需要授权，我们可以根据用户是否登录或其他条件来决定是否放行进入页面。如果不需要授权，直接放行即可。

这只是一个简单的例子，实际项目中，你可能需要使用真实的登录验证和状态管理。路由守卫的功能在真实的Vue应用中非常有用，它可以帮助你处理权限控制和导航操作等场景。

对于全局解析守卫，它允许你在路由被确认之前执行一些异步操作或数据预取逻辑。它常用于在渲染组件之前获取数据，确保组件渲染所需的数据已经准备就绪。

在Vue中，你可以使用`beforeResolve`钩子来创建全局解析守卫。这个钩子会在路由被确认之前触发，且会等待所有异步操作完成。

下面是如何使用全局解析守卫的示例：

1. 假设我们有一个异步函数来模拟获取用户信息的操作。

```javascript
// utils.js
export function fetchUserInfo() {
return new Promise((resolve) => {
// 模拟异步请求
setTimeout(() => {
const userInfo = { id: 1, name: 'John Doe', email: 'john@example.com' };
resolve(userInfo);
}, 1000);
});
}
```

2. 在路由配置中，添加全局解析守卫。

```javascript
// main.js

import Vue from 'vue';
import App from 'https://blog.csdn.net/qq_58647634/article/details/App.vue';
import VueRouter from 'vue-router';
import { fetchUserInfo } from 'https://blog.csdn.net/qq_58647634/article/details/utils';

Vue.use(VueRouter);

const routes = [
// ...（之前的路由配置）
];

const router = new VueRouter({
routes,
});

router.beforeResolve(async (to, from, next) => {
// 在进入路由之前，执行异步操作来获取数据
if (to.matched.some(record => record.meta.requiresAuth)) {
try {
// 这里使用 fetchUserInfo 来模拟异步获取用户信息
const userInfo = await fetchUserInfo();
// 将用户信息添加到路由的元数据中，这样组件可以在组件内访问到这些数据
to.meta.userInfo = userInfo;
next();
} catch (error) {
// 异步操作出错，可以跳转到错误页面或其他处理
console.error(error);
next('/error');
}
} else {
// 如果不需要登录验证，直接进入下一个钩子或导航
next();
}
});

new Vue({
render: h => h(App),
router,
}).$mount('#app');
```

3. 现在，在`UserInfo.vue`组件中，我们可以通过`this.$route.meta.userInfo`来访问在全局解析守卫中获取的用户信息。

```vue

<template>
<div>
<h1>User Information Page</h1>
<p>Welcome, {{ userInfo.name }}!</p>
<p>Email: {{ userInfo.email }}</p>
</div>
</template>

<script>
export default {
computed: {
userInfo() {
return this.$route.meta.userInfo || {};
}
}
}
</script>
```

全局解析守卫允许我们在路由导航前获取异步数据，并将其添加到路由的元数据中，以便在组件中使用。这样，我们可以确保组件渲染之前所需的数据已经准备好。记得在实际项目中，使用真实的异步请求来获取数据，并处理可能的错误情况。

全局后置守卫允许你在路由切换完成后执行一些操作，无论是成功完成路由导航还是导航被中止或出现错误，都会触发全局后置守卫。

在Vue中，你可以使用`afterEach`钩子来创建全局后置守卫。这个钩子会在路由切换完成后被调用，无论是成功渲染组件还是导航被中止。

下面是如何使用全局后置守卫的示例：

1. 在`main.js`文件中添加全局后置守卫。

```javascript
// main.js

import Vue from 'vue';
import App from 'https://blog.csdn.net/qq_58647634/article/details/App.vue';
import VueRouter from 'vue-router';

Vue.use(VueRouter);

const routes = [
// ...（之前的路由配置）
];

const router = new VueRouter({
routes,
});

router.afterEach((to, from) => {
// 在路由切换完成后执行一些操作
console.log(`Navigated from ${from.path} to ${to.path}`);
});

new Vue({
render: h => h(App),
router,
}).$mount('#app');
```

2. 现在，每当你在应用中进行路由切换时，无论是通过编程式导航（如`this.$router.push()`）还是通过点击链接，都会在控制台中打印出前后路由路径。

全局后置守卫通常用于执行一些日志记录、统计分析或与第三方服务的集成等操作。请注意，全局后置守卫并不能阻止导航过程，它只是在导航完成后执行额外的操作。

需要注意的是，在`afterEach`钩子中没有`next`函数，因为该钩子不会影响导航本身，而是作为一个"观察者"在导航完成后进行操作。

在路由配置中，你可以使用属性来定义路由独享守卫。这个守卫将仅应用于该特定路由，不影响其他路由。

在上述示例中，路由独享守卫被应用于路由。在进入该路由之前，会执行内部定义的逻辑，检查是否满足进入条件。

组件内部守卫是指在组件内部通过、和这三个守卫来执行特定的逻辑。这些守卫只能在路由组件中使用。

在上述示例中，我们定义了组件内的三个守卫：、和。这些守卫将在组件内部的路由变化时执行相应的逻辑。守卫特别需要注意，因为它没有访问组件实例，所以不能直接访问组件的数据或方法，但你可以通过回调函数中的参数来访问上下文。

综上所述，Vue提供了全局前置守卫、全局解析守卫和全局后置守卫,路由独享守卫,组件内守卫这五种路由守卫，使得你可以控制页面的访问权限，处理登录状态检查，以及在导航发生前后执行一些操作。根据不同的场景，你可以选择使用合适的守卫来满足你的需求。

2025年vue路由守卫（vue路由守卫有几种）

相关推荐