能否将命名路由的label属性直接传递给<router-link>组件使用？

错误原因 #

你写法不生效的核心问题是：this.$router是全局路由实例对象，本身不携带单条路由的自定义配置字段，你定义的label属于单条路由记录的属性，需要匹配到对应路由记录才能读取。

解决方案 #

方案1：直接读取路由配置（不用修改原有路由定义）

你可以通过路由实例的options.routes拿到你定义的全部路由配置数组，按name匹配到对应路由后读取label即可。
首先在组件内定义一个公共方法：

methods: {
  // 传入路由name即可返回对应的label
  getRouteLabel(routeName) {
    const targetRoute = this.$router.options.routes.find(item => item.name === routeName)
    return targetRoute ? targetRoute.label : ''
  }
}

模板中直接调用即可：

<router-link :to="{name: 'home'}">{{ getRouteLabel('home') }}</router-link>

方案2：按Vue Router规范将自定义字段放入meta（推荐写法）

Vue Router官方推荐把路由自定义字段放在meta属性下，方便统一管理和读取，首先修改你的路由配置：

const routes = [
  {
    path: '/',
    name: 'home',
    meta: {
      label: 'Start'
    },
    component: Home
  }
] 

如果是需要读取当前激活路由的label，模板中直接写即可：

<!-- 仅适用于读取当前激活的路由的label -->
{{ $route.meta.label }}

如果是需要读取指定name的路由的label，配合方案1的方法调整下取值逻辑即可：

return targetRoute ? targetRoute.meta.label : ''

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