使用 Vue Router 时，路由参数不会在 Vue 组件内渲染

Question

我已经使用这些路由运行了 Vue 路由器：

const routes = [
  {
    path: '/',
    name: 'home',
    params: {
      label: 'Home page'
    },
    component: Home
  },
  {
    path: '/group1',
    name: 'group1',
    params: {
      label: 'Group One'
    },
    redirect: { name: 'subgroup1' },
    children: [
      {
        path: 'subgroup1',
        name: 'subgroup1',
        params: { label: 'Sub Group One' },
        component: SubGroup1,
      },
      {
        path: 'subgroup2',
        name: 'subgroup2',
        params: { label: 'Sub Group Two' },
        component: SubGroup2,
      }
    ]
  }
]

我想在组件内渲染

label

参数，但它不起作用。这是我的组件的示例：

<template>
  <div>
    {{ $route.params.label}}
  </div>
</template>

我做错了什么？我该如何让它发挥作用？

Answer 1

访问此类标签不能通过当前路由来完成，而是通过访问整个路由器本身来完成。

用这个就可以实现

<template>
  <div>
    // pass the index of whatever route you want to access to get the 
    label
    {{ $router.options.routes[0].params.label }}
  </div>
</template>

我希望这有帮助。