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

【问题标题】：What is the best way to set 2 routes to the same component将 2 条路由设置到同一个组件的最佳方法是什么
【发布时间】：2019-12-02 11:20:00
【问题描述】：

我知道它的基本类型，但我在 Vue.js 中找不到这个的最佳实践。

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

基本上它应该是一个附属编号作为参数 - 或者根本没有附属。

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

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

此代码有效，但显然不是一个好的解决方案，因为我也收到此警告 - '[vue-router] Duplicate named routes definition'

最好的方法是什么？

非常感谢。

【问题讨论】：

标签： javascript vue.js routing vue-router vue-cli-3

【解决方案1】：

您收到错误只是因为您对两条路线使用相同的name (home)。您可以将这些调整为 e。 G。 home 和 home-2 或其他。最佳做法是仅使用 1 条单一路由并相应地调整参数和查询。

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

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

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

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

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

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

... 并使用 /home?affId=123 附加您想要的任何查询参数。

【讨论】：