javascript - How to get path's parameters in url's breadcrumb in Vue.js

Question

I'm working with Vue

In my app's router, I'd like to use path's get parameters in breadcrumb's URL.

I'd like to do something like this :

  {
      path: 'pages/gestion/region/:reg',
      name: 'gestion-depa',
      component: () => import('@/views/pages/MyPage.vue'),
      meta: {
        breadcrumb: [
          { title: 'Home', url: '/' },
          { title: 'region', active: true, url:"/pages/list/:reg" },//Here i want to use my params get, but it doesn't work 
          { title: 'dep', active: false }
        ],
        pageTitle: 'Gestion',
        rule: 'editor',
        requiresAuth: true,
      }
    },

My breadcrumps redirect to /pages/list/:reg, but I need something like /pages/list/5

Can someone have an idea ?

Thank

question from:https://stackoverflow.com/questions/65845648/how-to-get-paths-parameters-in-urls-breadcrumb-in-vue-js

Answer 1

You could use beforeEnter to update the meta:

meta: {
...
},
beforeEnter: (to, from, next) => {
  to.meta.breadcrumb[1].url = `/pages/list/${to.params.reg}`
  next();
}