Question

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

Answer 1

您可以使用

在路由器链接中传递参数

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

此处“name”键参数定义路线的名称，“params”键定义您需要使用该路线发送的参数。

如果您需要使用路径路径而不是路由名称，则可以使用。

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

Reference

Answer 2

看起来params: {...}不能用于非命名路由，所以为了实现这一点，我必须像这样建立我的链接：

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

Answer 3

使用ES6模板文字：

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

Answer 4

我正在使用它，效果很好：

const kerberos = require('kerberos').Kerberos;
const fetch = require('node-fetch');

(async () => {
    const client = await kerberos.initializeClient("HTTP@site.internal.net", {
        mechOID: kerberos.GSS_MECH_OID_SPNEGO,
    })

    const ticket = await client.step("")

    const resp = await fetch("https://site.internal.net/api/v1/hello", {
        headers: {
            'Authorization': 'Negotiate ' + ticket
        }
    })

    console.log(await resp.json())
})();

还使用以下代码对其进行检索：

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

Answer 5

router / 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>

Answer 6

未命名路由的解决方案：

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

产生/register?plan=private

来源：Documentation

Answer 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

使用router-link在vuejs中使用params进行路由

7 个答案: