如何在Vue.js的面包屑导航中获取URL路径参数

Question

我正在使用Vue。

在我的应用程序路由器中，我希望在面包屑的URL中使用路径的参数。

我想要像这样做：

  {
      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,
      }
    },

我的面包屑导航重定向到/pages/list/:reg，但我需要像/pages/list/5这样的东西。

有人有主意吗？

谢谢。

- gassddr

Answer 1

您可以使用beforeEnter来更新元数据：

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

- Dan