Vue 3 与 Vue Router：路由器链接具有正确的 Vue 参数，但未反映在 HTML 中

Question

我的单页应用程序从 Express 端点检索组织数据，并列出登录用户帐户可用的不同组织。getUser是一个 vuex getter。组织名单打印得很好。当我签入 Vue 检查器插件时，下面的代码将组织 slug (org.slug) 显示为每个组织的路由器链接上的参数。但编译后的 html（dev 模式）无法反映单个 slug 参数。所有链接都显示相同的a href="..."元素，指向数组中索引 0 处的第一个组织 slug。只有 org.slug 值在 v-for 循环/列表中重复。org.name 和 org.id 正确。<li v-for="org in getUser.organizations" :key="org.id">    <router-link :to="{ name: 'dashboard', params: org.slug }">      {{ org.name }}    </router-link></li>在 Vue 检查器中：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路由器视图：const routes = [  {    path: '/login',    name: 'login',    component: Login,    meta: { publicRoute: true }  },  {    path: '/:slug/dashboard',    name: 'dashboard',    component: () => import(/* webpackChunkName: "dashboard" */'../views/Dashboard.vue')  },  {    ...etc.  }]你们有人看到我做错了什么吗？谢谢你的建议！

Answer 1

要将变量传递给路由，您需要在params对象中提供其值。所以它会是这样的：

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