代码之家 › 专栏 › 技术社区 › gespinha

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

vue-router vue.js javascript

gespinha · 技术社区 · 11 月前

我已经让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>

我做错了什么?我怎样才能让它工作?

2 回复 | 直到 11 月前

Estus Flask 11 月前

meta 用于路由元数据,如标签(因此得名),而 params 用于传递给路线的路线参数。

应该是:

...
path: '/',
meta: { label: 'Home page' },
...

和

{{ $route.meta.label}}

-1

Dosunmu Afeez 11 月前

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

这可以通过使用这个来实现

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

我希望这能有所帮助。

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

3 月前

Niobos · 如何/是否有方法使通用算法函数同时与同步和异步函数一起工作?

3 月前

Alex · 在轻量级中同时解构和不解构变量

4 月前

Ângelo Rigo · ReactJS映射:如何迭代[关闭]

4 月前

bairog · 从按属性筛选的对象数组字典中创建值数组

4 月前

KaiMcKiernan · 基于Math.random()的函数在另一个函数内不起作用[关闭]

4 月前

David Jeong · 浏览器不会为浏览器自动添加的某些标头发送CORS预检请求吗?

4 月前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

4 月前

user3472810 · Angular@Output/EventEmitter返回undefined

4 月前

lokiuucx · JS对象属性返回未定义,尽管对象属性应该有值

4 月前