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

Question

我知道它的基本原理，但我无法在 Vue.js 中找到这方面的最佳实践。

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

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

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

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

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

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

非常感谢。

Answer 1

您收到错误只是因为您对两条路线使用相同的 name（主页）。您可以将这些调整为 e。 G。 home 和 home-2 之类的。最佳做法是仅使用 1 条路线并相应地调整参数和查询。

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

关注当前路线

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

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

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

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

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

... 并仅使用 /home?affId=123.

附加您想要的任何查询参数

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

What is the best way to set 2 routes to the same component

javascript

routing

vue.js

vue-router

vue-cli-3