vue跳转拦截 - 技术栈

在Vue中实现路由跳转拦截，通常是在Vue Router中使用导航守卫（Navigation Guards）。导航守卫可以用来控制路由的访问权限，比如用户未登录时阻止访问某些页面。

以下是在Vue 3中使用Vue Router 4实现跳转拦截的一个基本示例：

首先，确保你已经安装并配置了Vue Router。
在你的路由配置文件（通常是router/index.js或router.js）中，你可以使用全局前置守卫beforeEach来拦截路由跳转。

复制代码

import { createRouter, createWebHistory } from 'vue-router';
import store from '../store'; // 假设你使用了Vuex来管理状态

const routes = [
// ...你的路由配置
];

const router = createRouter({
history: createWebHistory(),
routes,
});

router.beforeEach((to, from, next) => {
// 检查目标路由是否需要认证
if (to.matched.some(record => record.meta.requiresAuth)) {
// 检查用户是否已登录
if (!store.getters.isLoggedIn) {
// 用户未登录，重定向到登录页面
next({
path: '/login',
query: { redirect: to.fullPath } // 将要跳转的路由作为参数传递给登录页面
});
} else {
// 用户已登录，继续
next();
}
} else {
// 目标路由不需要认证，直接继续
next();
}
});

export default router;

在上面的代码中，我们使用了to.matched.some(record => record.meta.requiresAuth)来检查目标路由是否需要认证。如果需要认证，我们再检查用户是否已经登录。如果用户未登录，我们将用户重定向到登录页面，并传递将要跳转的路由作为参数。

在你的路由配置中，你可以使用meta字段来标记哪些路由需要认证。

复制代码

const routes = [
{
path: '/protected',
component: () => import('../views/ProtectedView.vue'),
meta: { requiresAuth: true }
},
// ...其他路由配置
];

在登录页面，你可以获取传递的参数，并在用户登录成功后重定向到之前尝试访问的页面。

复制代码

// 假设这是登录页面的某个方法
methods: {
login() {
// ...登录逻辑
if (this.$route.query.redirect) {
this.$router.push(this.$route.query.redirect);
} else {
this.$router.push('/'); // 默认重定向到首页
}
}
}

这样，你就实现了一个基本的路由跳转拦截机制。根据你的应用需求，你可能需要对此进行更复杂的逻辑处理，比如处理不同的认证状态、错误提示等。