将动态数据传递给 router-link。

Question

我正在尝试将动态路径传递给 vue-router，但我似乎无法为其提供正确的语法。这是我正在尝试的。

<li v-on:click="$emit('closeDropdown')"><router-link to="item.route" id="button">{{ item.title }}</router-link></li>

只是用引号括起来还不够，因为这是我在检查元素时看到的：href="#/item.route" 用于所有项目。

父组件

<UserDropdownList v-for="item in userDropdownItems" v-bind:item="item"></UserDropdownList>

 data: function () {
  return {
    userDropdownItems: [
      { title: 'Profile', route: "/profile" },
      { title: 'Users', route: "/users" }
    ]
   }
 }

如何访问Router-link to 属性的路由属性？

Answer 1

使用动态路由参数

如果您查看 vue-router 文档，您所描述的内容听起来很像 dynamic route parameters 的工作：

const router = new VueRouter({
  routes: [
    // dynamic segments start with a colon
    { path: '/user/:id', component: User, name: 'user' }
  ]
});

然后，对于所述路线，通过<router-link> 到generate a link，您将执行以下操作：

<!-- named route -->
<router-link :to="{ name: 'user', params: { id: 123 }}">User</router-link>

---

直接使用变量router-link

要在路由器链接中使用变量，您所要做的就是：

<router-link :to="item.route" id="button">{{ item.title }}</router-link>

在 to 属性之前添加一个冒号 (:) 告诉 Vue 你将在其中使用一些 javascript。

---

使用查询参数

您可以使用查询选项，而不是使用动态路由参数或 js 变量：

<!-- with query, resulting in `/register?plan=private` -->
<router-link :to="{ path: 'register', query: { plan: 'private' }}">Register</router-link>

---

希望对您有所帮助！我已经附上了我找到的所有文档来源。我强烈建议对其进行深入了解，因为它是我遇到过的写得最好的文档网站之一。