首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >Vue 3和Vue路由器:路由器链接有正确的Vue param,但没有反映在HTML中

Vue 3和Vue路由器:路由器链接有正确的Vue param,但没有反映在HTML中
EN

Stack Overflow用户
提问于 2020-11-25 22:36:00
回答 1查看 361关注 0票数 1

我的单一页面应用程序从Express端点检索组织数据,并列出登录用户帐户可用的不同组织。

getUser是一种vuex。组织名单上打印的很好。当我签入Vue检查插件时,下面的代码将组织段塞(org.slug)显示为路由器链接上的一个参数。

但是,编译后的html (dev模式)无法反映单个段塞参数。所有链接都在索引0处显示相同的a href="..."元素,指向数组中的第一个组织段塞。

它只是在v-for循环/列表中重复的org.slug值。org.name和org.id是正确的。

代码语言:javascript
运行
复制
<li v-for="org in getUser.organizations" :key="org.id">
    <router-link :to="{ name: 'dashboard', params: org.slug }">
      {{ org.name }}
    </router-link>
</li>

在Vue检查员中:

代码语言:javascript
运行
复制
props
    ariaCurrentValue:"page"
    custom:false
    to:Object
      name:"dashboard"
      params:"my-organization-0" // this changes to -1, -2, etc depending on the list item in the list

Vue路由器:

代码语言:javascript
运行
复制
const routes = [
  {
    path: '/login',
    name: 'login',
    component: Login,
    meta: { publicRoute: true }
  },
  {
    path: '/:slug/dashboard',
    name: 'dashboard',
    component: () => import(/* webpackChunkName: "dashboard" */'../views/Dashboard.vue')
  },
  {
    ...etc.
  }
]

你们看到我做错什么了吗?谢谢你的建议!

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2020-11-25 23:56:42

要将变量传递给路由,需要在params对象中提供它的值。所以就像:

:to="{ name: 'dashboard', params: { slug: org.slug } }">

参考资料:API文档

票数 2
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/65013659

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档