使用Vue Router时，路由参数无法在Vue组件中渲染如何解决？

你犯的核心错误是在路由配置对象中直接定义了params字段——Vue Router的路由规则里并没有这个预设参数的用法，params是用于导航时动态传递参数的，不是写在路由规则里的静态配置项。

正确的实现方式（两种可选） #

方案1：使用路由元信息（meta）存静态label（推荐）

因为你的label是固定文本，适合放在路由的meta字段中（专门用来存储路由的附加信息）：

修改路由配置：

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

组件中渲染：

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

方案2：用动态路由参数（适合动态场景）

如果你的label需要根据场景动态变化，可以在路由路径中定义参数占位符，再通过导航传递参数：

修改路由配置（以home路由为例）：

const routes = [
  {
    path: '/:label?', // ?表示该参数为可选
    name: 'home',
    component: Home
  },
  // 其他路由按相同逻辑修改路径...
]

导航时传递参数：

// 示例：在按钮点击事件中触发导航
this.$router.push({ name: 'home', params: { label: 'Home page' } })

此时组件中{{ $route.params.label }}就能正常取值，但这种方式更适合动态参数场景，你的需求用方案1更合理。

补充说明 #

路由配置里的params属性无效的原因：Vue Router只会识别导航方法（push/replace等）中传递的params，或者URL路径中匹配到的动态参数，路由规则本身的params字段不会被解析到$route.params中。

内容的提问来源于stack exchange，提问作者gespinha