[Vuejs]-How to define multiple routes to single component?

0👍

The path attribute should be a single string, not an array.
You need to define two routes. If you prefer not to duplicate your code, you could do something like this:

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

To get the number parameter in your vue component, you should be able to fetch it with the following code:

this.$route.query.number

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

enter image description here

0👍

In the Home component, setup a watcher on $route.query to observe changes to the query parameter, redirecting to the landing page when the number query is not found:

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

In the router config, use a regular expression within the path string (passed to path-to-regexp) so that both / and /suites resolve to the Home component:

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

demo

Leave a comment