前端 - vue2中路由怎么301到新的网站？

Question

vue2中路由怎么301到新的网站

我有个关于（about）页面，我是写在vue路由里的，当我点击关于按钮时直接跳的vue路由里的about,我现在要把about页面放到了别的项目下，想实现当我点击关于按钮时，跳转另一个项目的about，如果我直接访问另一个项目/about,这样是能跳转，但会造成用户收藏的连接报错问题，和出现seo问题

我想到了在nginx里做301

location /aboutus {    #add_header Cache-Control no-store;    # 永久重定向      rewrite ^ http://baidu.com permanent;    } 

但是nginx和vuerouter是两个系统，还是会先跳转我原来项目的about页面，有没有大佬知道应该怎么解决呢

Answer 1

301 重定向的功能是从HTTP服务中做的，不是在客户端的 Vue-router 中实现的。

所以我的建议是直接从 Nginx 中配置，如果你想要在客户端也做处理，那就通过路由守卫 来处理。在 /about 页面配置中增加一个 beforeEnter 配置项，直接跳转到另外一个项目中。

Answer 2

你可以通过在你的 Vue 项目中使用编程式导航来实现这一点。以下是一种可能的方法：

在你的 Vue 组件中，你可以使用 this.$router.push 方法进行编程式导航。这个方法接受一个路由配置对象，或者一个字符串路径。你可以在配置对象中设置 meta 字段来传递元数据给目标路由。

例如，你可以在你的 Vue 组件中这样做：

this.$router.push({  path: 'http://new-project.com/about',  meta: {    transition: 'redirect' // 告诉 Vue Router 这是一个重定向  }});

然后在你的 Vue Router 中，你可以监听 $routeChangeStart 事件，并在重定向发生时强制应用一个 301 重定向。这可以在全局路由守卫中完成，或者在每个路由配置中进行。例如：

const originalPush = VueRouter.prototype.push;VueRouter.prototype.push = function push(location, onResolve, onReject) {  if (onResolve || onReject) return originalPush.call(this, location, onResolve, onReject);  return originalPush.call(this, location).catch(err => err);};

然后，你可以在全局路由守卫中这样做：

router.beforeEach((to, from, next) => {  if (to.meta.transition === 'redirect') {    next(false); // 强制进行重定向  } else {    next(); // 正常导航  }});

在新的路由中，你需要在目标页面的 meta 字段中设置 transition: 'redirect'。这样，当用户尝试访问旧页面时，他们将被重定向到新页面。注意，这种方法可能需要你修改你的 Vue Router 版本，因为我在这里使用了一些 Vue Router 的内部方法。