Question

我们为一家保险公司提供了一个vue.js应用程序，其中每个代理商都有自己动态生成的网站。目前，如果您访问乱码链接，它将显示空白代理模板。我们需要不包含代理程序段塞的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
}

Answer 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: '/' });
        }
      }
    }
  ]
})

Answer 2

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

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

因此，此路径允许根处的任何随机字符返回组件AgentSite（但是空白，因为随机字符＆＃34;参数＆＃34;我猜测组件中没有任何内容）。

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

修改：您似乎已经有了一个很棒的解决方案here ...

如何使用vue-router

2 个答案: