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 } }">