Vue Router 动态路由访问 PARAMS

Question

我使用类似于这种形式的动态路由：

router.js

...
{
 path: "/init/clients/moral-person/:company",
 name: "moralPerson",
 component: () => import('../MoralPerson.vue'),
 meta: {
   auth: true,
   breadcrumb: [
     { text: "Init", disabled: false, name: "init" },
     { text: "Clients", disabled: true, name: "" },
     { text: "Moral Person", disabled: false, name: "crudMoralPerson"},
     { text: "Company", disabled: true, name: "", icon: "fas fa-dollar-sign"},
   ]
 }
} 
...

注意：面包屑的部分是为其他组件渲染的。

当我做 router.push 是这样的：

一些文件

...

this.$router.push({
  name: "moralPerson",
  params: { company: this.nameCompany }
});
...

最后看起来像这样：

我尝试使用 this.router.params，在本例中为 :company 并位于我标记的蓝色部分或此处：

router.js

...
     // in this line
     { text: :company, disabled: true, name: "", icon: "fas fa-dollar-sign"},
...

我的问题是，如何访问此参数并在我需要的这部分中配置？

编辑

我尝试：

...
{ text: this.$route.params.empresa, disabled: true, name: "", icon: "fas fa-dollar-sign"},
...

总是发给我：

Answer 1

让我们看看，在您的路由器配置中，您表示moralPerson 组件将接收一个名为 company 的参数，不是吗？

this.$router.push({
  name: "moralPerson",
  params: { company: this.nameCompany }
});

上面的代码是正确的，如果你想传递一些参数，你必须使用名称来调用你的组件。 要访问此参数，您必须执行以下操作，主要是在 created 生命周期函数中：

this.$route.params.company

希望对你有帮助

Answer 2

试试这样的：

  {
    path: '/init/clients/moral-person/:company'
    name: 'moralPerson',
    component: () => import('../MoralPerson.vue'),
    meta() {
      return {
        auth: true,
        breadcrumb: [
          { text: 'Init', disabled: false, name: 'init' },
          { text: 'Clients', disabled: true, name: '' },
          { text: 'Moral Person', disabled: false, name: 'crudMoralPerson' },
          { text: this.params.company, disabled: true, name: '', icon: 'fas fa-dollar-sign' },
        ],
      };
    },
  },

当你调用元函数时，试试这个this.$route.meta()，因为现在meta属性是一个函数。