使用 router-link 在 vuejs 中使用参数进行路由答案

【问题标题】：routing with params in vuejs using router-link使用 router-link 在 vuejs 中使用参数进行路由
【发布时间】：2018-01-25 19:47:09
【问题描述】：

我正在尝试使用 vuejs 构建一个水疗中心，其中我现在有一个用户列表，当我单击一个用户时，它应该路由到一个新页面，其中包含特定用户的用户详细信息如何在 router-link 中参数化用户 ID

【问题讨论】：

欢迎来到 StackOverflow。这是一个针对特定编程问题的问答网站。要求代码或事物的建议是题外话。请拨打tour 并阅读How to Ask 以了解更多信息。将您已经尝试过的东西制作成Minimal, Complete, and Verifiable example 是一个值得赞赏的概念。

标签： vue.js

【解决方案1】：

您可以使用在路由器链接中传递参数

<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>

这里的“name”键参数定义了路由的名称，“params”键定义了您需要通过该路由发送的参数。

如果你需要使用Route Path而不是Route name，你可以使用。

<router-link :to="{ path: 'home', params: { userId: 123 }}">Home</router-link>

Reference

【讨论】：

如何在路由页面获取我的请求时传递这个参数？
你为什么想要那个？任何特殊原因。
获取具有该 ID 的数据。我想通了谢谢你的帮助
对我来说 Home 不起作用。你知道这可能是什么原因吗？
@Romick 看起来 params: {...} 不适用于 path 路由，只能用于命名路由。

【解决方案2】：

看起来params: {...} 不适用于未命名的路线，因此为了使其正常工作，我必须像这样制作我的链接：

<router-link :to="'/view-customer/' + customer.ID">

【讨论】：

谢谢！在我的情况下，你的回答只是提示我命名我的路线:)

【解决方案3】：

使用 ES6 模板文字：

<router-link :to="`/books/${book.id}`"></router-link>

【讨论】：

【解决方案4】：

我正在使用它，它工作正常：

<router-link :to="'/home?id=' + customer.ID">

也可以使用下面的代码来检索它：

this.$route.query.id

【讨论】：

这不好，因为对于客户来说这是一个丑陋的 URL，他们想要一个 ID 附加到他们的主页 URL 的末尾？

【解决方案5】：

路由器/index.js：

import VueRouter from 'vue-router'
import List from '../views/List.vue'
import Item from '../views/Item.vue'

Vue.use(VueRouter)

  const routes = [
  {
    path: '/',
    name: 'List',
    component: List
  },
  {
    path: '/item/:id',
    name: 'Item',
    component: Item
  }
  }
]

List.vue:

<router-link :to="{ name: 'Item', params: { id: data.item.id }}">{{ data.item.id }}</router-link>

Item.vue：

<template>
    id: {{ $route.params.id }}
</template>

<script>
    return this.$route.params.id
</script>

【讨论】：

【解决方案6】：

未命名路线的解决方案：

<router-link :to="{ path: 'register', query: { plan: 'private' }}"
  >Register</router-link>

导致/register?plan=private

来源：Documentation

【讨论】：

【解决方案7】：

路由声明

{path: '/insta-view/:name', name: 'instaFrontView', component: instaFrontViewComponent},

使用路径

绑定参数

<router-link :to="'insta-view/'+ loginUserName" class="nav-link"> View</router-link>

使用名称

绑定参数

<router-link :to="{ name: 'instaFrontView', params: { name: loginUserName }}" class="nav-link"> View</router-link>

export default {
data() {
    return {
      loginUserName: 'test',
    }
  },
}

获取代码中的参数

this.$route.params.name

【讨论】：