将动态数据传递到路由器链接。

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-linkto属性的route 属性？

Answer 1

使用动态路线参数

如果您看一下vue-router文档，您所描述的内容听起来很像动态路由参数的工作：

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

然后，以产生一个链接通过<router-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>

希望这可以帮助！我将找到的所有文档资料都附在其中。我强烈建议您对其进行仔细的浏览，因为它是我见过的写得最好的文档站点之一。