Question

我正在努力将现有应用程序迁移到新技术堆栈，该堆栈在后端使用Node和MongoDB，在前端使用Vue。我有相当多的页面需要重定向到新的URL（超过50）。我知道我可以在前端做这样的事情：

const appRouter = new Router({
  mode: 'history',
  routes: [
    { path: '/a', redirect: '/a2' },
    { path: '/b', redirect: '/b2' },
    { path: '/c', redirect: '/c2' },
  ]
});

然而，它并没有让我觉得特别优雅。我可以看到将重定向保留在另一个文件中并导入它们以保持我的路由器文件更整洁，但这似乎只是格式化的好处。

我想知道其他人如何处理Vue中的大量重定向？使用Node在服务器级别做这会更好吗？

Answer 1

如果样板是问题，你可以使用类似的东西：

const router = new VueRouter({
  routes: [
    { path: '/([abc])', redirect: to => {
        returect to.path + '2'; // to.path will be like '/a'
    }}
  ]
})

请注意，()中的部分是可以自定义的正则表达式。

Answer 2

通常@acdcjunior的解决方案已经足够好了，但有时您可能更喜欢挂钩beforeRouteUpdate来实现重定向。

您可以查看vue-router: dynamic Routing了解详情。

以下是一份简单的样本来自官方文件：

const User = {
  template: '...',
  beforeRouteUpdate (to, from, next) {
    if ( to.match(new RegExp('your_regex_expression'))) {
        next('redirect_url')
    } else {
        // default
        next()
    }
  }
}

或者在main.js中使用global guards：

import router from './router'

router.beforeEach((to, from, next) => {
    if ( to.match(new RegExp('your_regex_expression'))) {
        next('redirect_url')
    } else {
        // default
        next()
    }
})

Answer 3

我有相当多的网页需要重定向到新网址

当我们谈论重定向统一资源定位器（URL）的单一页面应用程序（SPA）的上下文，如Vue with Vue Router，由Node.js等Web服务器托管时，我们可能意味着两件事之一：

我们已在Vue SPA中更改了视图的路径
我们已将SPA（资源）的位置从一个位置更改为另一个位置。

要确定您需要执行哪种重定向，我们可以检查URL的更改方式。 URL由以下组件组成：

scheme:[//[user[:password]@]host[:port]][/path][?query][#fragment]

默认情况下，Vue Router uses the #fragment (hash) portion of the URL更改视图，因此如果此更改，则应使用Alias or Redirect重定向。

如果网址的任何其他部分发生变化，我们应该让Node.js返回重定向的HTTP状态代码，例如301 Moved Permanently或302 Moved Temporarily。

如何在Node / Vue应用程序中处理大量重定向？

3 个答案: