将 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或其他。最佳做法是仅使用 1 个单一路由并相应地调整参数和查询。

在您的示例中，您使用了错误的路由映射。查询参数不应该跟在斜杠后面。相反，它应该始终由?.

根据您的用例，您可以简化您的路线。如果你需要访问一个 URL 参数，你可以使用这样的路由：

{

  path: '/:affiliateNumber',

  name: 'home',

  component: Home

},

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

但是，在您的情况下，仅使用查询参数就足够了。这样做您不必关心子路由或其他任何东西，因为查询参数始终是可选的。也就是说你可以像这样离开你的路线......

{

  path: '/',

  name: 'home',

  component: Home

},

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