如何使用 vue-router 重定向非动态 url答案

【问题标题】：How to redirect non-dynamic urls with vue-router如何使用 vue-router 重定向非动态 url
【发布时间】：2018-10-14 08:43:01
【问题描述】：

我们有一个适用于保险公司的 vue.js 应用程序，其中每个代理都有自己的动态生成的网站。目前，如果您访问乱码链接，它将显示空白代理模板。我们需要不包含代理 slug 的 url 来重定向到我们的“NotFound”组件。

如果碰巧有一个简单的修复方法，下面是我们的 vue-router 代码。否则，如果agent.name == null，添加计算函数来重定向访问者是否更容易？

感谢您的帮助！

好网址示例：https://my.piaselect.com/georgebeach

错误网址示例：https://my.piaselect.com/georgebeach2

我们的路由器：

{
  path: "/:id",
  component: AgentSite,
  name: 'AgentSite',
  props: true
},
{
    path: '*',
    name: 'NotFound',
    component: NotFound
}

【问题讨论】：

关键是如何知道代理ID是否有效

标签： vue.js vue-router

【解决方案1】：

以@Jacob Goh 所说的话为基础。

如果代理 ID 有效与否，您现在需要一种方法。假设您有一个代理 id 列表，您可以使用路由保护来阻止指向无效 id 的路由。

https://router.vuejs.org/en/advanced/navigation-guards.html

我没有对此进行测试，但您应该能够大致了解。

const agentIds = ['Bob', 'Michael']

const router = new VueRouter({
  routes: [
    {
      path: '/foo:id',
      component: Foo,
      beforeEnter: (to, from, next) => {
        if (agentIds.includes(to.params.id)) {
          // The agent is fine - continue
          next();
        } else {
          // doesn't exist - go back to root or any other page
          next({ path: '/' });
        }
      }
    }
  ]
})

【讨论】：

这会起作用，除非在这种情况下，会有新的代理一直加入。 ID总是在变化的。有没有办法通过检查 id 是否为空来实现相同的目标？
在我的例子中，我以数组为例。我认为您会从其他地方请求代理数据，例如从数据库或服务器。这将使其与新代理保持同步。

【解决方案2】：

它不起作用，因为您没有在此路径中指定任何名称：

{
  path: "/:id",
  component: AgentSite,
  name: 'AgentSite',
  props: true
},

因此，此路径允许根处的任何随机字符返回组件AgentSite（但为空白，因为我猜随机字符“参数”不适合组件中的任何内容）。

为防止这种情况，您可以为路径指定一个名称：例如path: "agent/:id"。

编辑：看来你已经有了一个很好的解决方案here...

【讨论】：