将 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。