[Vuejs]-Vue router static param

by

-1👍

✅

Finally I use query string to resolve my question. With url http://localhost/?shopId=123#/products. I parsed query string when app startup and store shopId in a global object for accessing latter. When the hash string changed, the query string will be static.

0👍

You can add your path params like this:

router.push({ name: 'center.product', params: { SHOPID: theShopId }})

Or you can just push the path, using string replacement text.

router.push({ path: `center/${theShopId}/products` })

This assumes you defined your path using params.

center/:SHOPID/products

You can also put a navigation guard in place, and redirect to a different route, adding your SHOPID from the session

  routes: [
    {
      path: 'center/products',
      component: Products,
      beforeEnter: (to, from, next) => {
        next({ name: 'center.product', params: { SHOPID: $store.state.shopId }})
      }

or use query instead of path params

  routes: [
    {
      path: 'center/products',
      component: Products,
      beforeEnter: (to, from, next) => {
        next({ name: 'center.product', query: { shopId: $store.state.shopId }})
      }

When you push center/products it will be rerouted using the the shop id from your store, context, session, database, etc.

0👍

You can use meta fields for this. https://router.vuejs.org/guide/advanced/meta.html

Example from the docs:

routes = [
  {
     path: 'sample',
     meta: { shopId: 'id' }
  }
];

Leave a comment