将2条路由设置到同一组件的最佳方法是什么

Question

我知道它的基本知识，但是我无法在Vue.js中找到最佳实践。

我正在使用Vue Cli 3，需要获取一些指向应用程序中同一主页的路线。

基本上，它应该是会员编号作为参数-或根本没有会员编号。

所以我所做的是在router.js中-为同一home组件提供2条不同的路径：

    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/affId=:affiliateNumber?',
      name: 'home',
      component: Home
    },

此代码有效，但显然不是一个好的解决方案，因为我也收到此警告-'[vue-router]重复命名路由定义'

完成它的最佳方法是什么？

非常感谢。

Answer 1

收到错误消息只是因为两条路线都使用相同的name （家）。 您可以将它们调整为例如home和home-2或其他任何形式。 最佳做法是仅使用一条单一路线并调整参数并进行相应查询。

在您的示例中，您使用了错误的路由映射。 查询参数绝不能使用斜杠。 相反，应该始终通过?来关注当前路线? 。

根据您的用例，您可以简化您的路线。 如果您需要访问URL参数，则可以使用如下路径：

{
  path: '/:affiliateNumber',
  name: 'home',
  component: Home
},

您随时可以在代码中访问:affiliateNumber 。 这也可以是子路径，父path: '/'可以是path: '/' 。

但是，对于您而言，仅使用查询参数就足够了。 这样一来，您就不必关心子路由或其他任何问题，因为查询参数始终是可选的。 也就是说，您可以像这样离开路线...

{
  path: '/',
  name: 'home',
  component: Home
},

...并仅需使用/home?affId=123附加任何查询参数。