在使用路由器链路的vuej中利用参数进行路由

von4xj4u  于 2023-01-09  发布在  Vue.js
关注(0)|答案(7)|浏览(159)

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

amrnrhlw

amrnrhlw1#

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

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

这里的“name”键参数定义了路由的名称,“params”键定义了您需要与该路由一起发送的参数。
如果您需要使用路由路径而不是路由名称,您可以使用。

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

参考文献

xqnpmsa8

xqnpmsa82#

看起来params: {...}不适用于非命名路由,所以要让它工作,我必须这样做我的链接:

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

fgw7neuy3#

使用ES6模板文字:
第一个月

kcwpcxri

kcwpcxri4#

未命名路由解决方案:

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

得到/register?plan=private
来源:文件

8dtrkrch

8dtrkrch5#

我正在使用这个,它的工作很好:

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

还可以使用以下代码来检索它:

this.$route.query.id
yrefmtwq

yrefmtwq6#

路由器/索引.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>
8iwquhpp

8iwquhpp7#

路径声明

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

使用路径绑定参数

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

使用名称绑定参数
一个二个一个一个
检索代码中的参数

this.$route.params.name

相关问题