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

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属性的路由属性？

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>通过<!-- 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

在<!-- with query, resulting in `/register?plan=private` --> <router-link :to="{ path: 'register', query: { plan: 'private' }}">Register</router-link> 属性之前添加冒号（:)告诉Vue你还要在那里使用一些javascript。

<小时/>

使用查询参数

您可以使用查询选项代替使用动态路由参数或js变量：

  email: {
    type: String,
    unique: true,
    lowercase: true,
    required: 'Email address is required',
    validate: [validateEmail, 'Please enter a valid email']
  },
  password: {
    type: String
  },
  role: {
    type: String
  },
  firstName: {
    type: String,
  },
  lastName: {
    type: String
  },
  phone: {
    type: Number,
    unique: true
  },
  address: [
    {
      number: {type: String},
      street: {type: String},
      city: {tyle: String},
      county: {type: String},
      postcode: {type: String}
    }
  ],

希望这会有所帮助！我已经附上我发现的所有文档来源。我强烈建议给它一个坚实的外观，因为它是我曾经遇到过的最精心编写的文档站点之一。