[Vuejs]-How to set dynamic routes with multiple dynamic parameters in Vue 3 (Vue Router)

by

3👍

✅

Your attempts likely failed because they mixed named parameter syntax (: followed by the param name) with unnamed parameter syntax ((.*)).

For zero or more named parameters (e.g., named myParams), use this pattern:

:myParams*

I recommend using a props function to parse the route params to be passed to the component as props, which lets the params format live in one central place and spares the component from having to examine the route:

const routes = [
  {
    path: '/products/:myParams*',
    component: () => import('@/components/Products.vue'),

    // parse key-value pairs into an object
    props: route => {
      const params = route.params.myParams
      const props = {}
      for (let i = 0; i < params.length; i += 2) {
        const value = i + 1 < params.length ? params[i + 1] : null
        props[params[i]] = value
      }
      return props
    }
  }
]

demo

👤tony19

Leave a comment