如何定义单个组件的多个路由？答案

【问题标题】：How to define multiple routes to single component?如何定义单个组件的多个路由？
【发布时间】：2021-04-13 17:50:09
【问题描述】：

我在我的项目中使用 Vue 2。我有这些路线：

 const routes = [
  {
    path: "/suites",
    component: Home,
  },
  {
    path: "*",
    component: LandingPage,
  },
];

我需要添加一条额外的路线：

www.mysite.com/?number=xxxxxx

在这条路线上，应该显示 Home 组件。

我试过了：

  {
    path: {"/suites","?number=xxxxxx"}
    component: Home,
  }

但是上面的态度是行不通的。知道如何制作两条路线（“xxxxxx”是一些可以更改的数字）

        "?number=xxxxxx"      
        "/suites"

要打开组件？

【问题讨论】：

?number 是/ 上的查询参数，所以使用{path: '/',alias: '/suites',component: Home}, 然后检查this.$route.path 如果它的/ 然后检查this.$route.query.number 以获得您的xxxxxx价值

标签： javascript vue.js

【解决方案1】：

路径属性应该是单个字符串，而不是数组。您需要定义两条路线。如果你不想重复你的代码，你可以这样做：

{
  ...(['/suites', '/'].map(path => ({
    path,
    component: Home,
  }),
}

要在你的 vue 组件中获取 number 参数，你应该可以使用以下代码获取它：

this.$route.query.number

见https://router.vuejs.org/api/#the-route-object

【讨论】：

感谢您的帖子。如何让 xxxxx 动态化？
我编辑了我的答案以更好地回答你的问题:)
不，目前还不清楚我如何使用地图路线以及如何在路线中使用麻木。
您无法指定您将在路由中收到的查询参数。或者，您可以执行以下操作：'/:number' 并得到它：this.$route.params.number
太阳能，我不需要获取number参数。如果我有这种路由格式，我只需要配置如何导航到 Home 组件：？number=xxxxx。 xxxxx 是任意数字。

【解决方案2】：

在Home 组件中，在$route.query 上设置一个观察者来观察查询参数的变化，当number 查询未找到时重定向到着陆页：

// Home.vue
export default {
  watch: {
    "$route.query"(query) {
      if (!query.number) {
        this.$router.replace({ name: "landing" })
      }
    }
  }
}

在路由器配置中，在path 字符串中使用正则表达式（传递给path-to-regexp），以便/ 和/suites 都解析为Home 组件：

const routes = [
  {
    path: "/(suites)?",  // "suites" is optional
    component: Home,
  },
  {
    path: "*",
    name: "landing",
    component: LandingPage,
  },
]

demo

【讨论】：