vue 实现重定向请求
在 Vue 中实现请求重定向通常涉及前端路由（如 vue-router）或 HTTP 请求拦截（如 axios）的处理。以下是两种常见场景的实现方法：
使用 vue-router 实现页面重定向
通过路由守卫或直接修改路由实现页面跳转：
// 方法1：在路由配置中直接定义重定向
const routes = [
{ path: '/old-path', redirect: '/new-path' }
];
// 方法2：在组件或路由守卫中动态重定向
this.$router.push('/new-path'); // 编程式导航路由守卫全局拦截示例：
router.beforeEach((to, from, next) => {
if (to.path === '/restricted') {
next('/login'); // 重定向到登录页
} else {
next();
}
});使用 axios 拦截器实现请求重定向
针对 API 请求的拦截和重定向：
import axios from 'axios';
// 请求拦截器
axios.interceptors.request.use(config => {
if (config.url.includes('/old-api')) {
config.url = config.url.replace('/old-api', '/new-api'); // 修改请求地址
}
return config;
});
// 响应拦截器（处理如 302 重定向）
axios.interceptors.response.use(
response => response,
error => {
if (error.response.status === 302) {
window.location.href = error.response.headers.location; // 跳转到新地址
}
return Promise.reject(error);
}
);服务端渲染（SSR）场景
在 nuxt.js 中可通过 serverMiddleware 或 asyncData 处理重定向：
// nuxt.config.js
export default {
serverMiddleware: [
{ path: '/old', handler: (req, res) => res.redirect(301, '/new') }
]
};
// 或在页面组件中
async asyncData({ redirect }) {
redirect(301, '/new-path');
}注意事项
- 前端重定向无法修改 HTTP 状态码（如 301/302），仅适用于逻辑跳转。
- 敏感操作（如支付）应在服务端完成重定向，避免前端篡改风险。
- 对于 SEO 关键页面，建议使用服务端重定向。
