Vue路由器对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

尝试这样的事情：

  {
    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属性是一个函数。

Answer 2

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

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

上面的代码是正确的，如果要传递一些参数，则必须使用名称调用组件。 要访问此参数，您必须执行以下操作，主要是在创建的生命周期功能内：

this.$route.params.company

希望这对您有帮助