1. query 传参
list.json
{
"data": [
{
"name": "面",
"price":300,
"id": 1
},
{
"name": "水",
"price":400,
"id": 2
},
{
"name": "菜",
"price":500,
"id": 3
}
]
}
login.vue
<template>
<h1>
我是列表页面
</h1>
<table cellpadding="0" class="table" border="1">
<thead>
<tr>
<th>商品</th>
<th>价格</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr :key="item.id" v-for="item in data">
<th>{{ item.name }}</th>
<th>{{ item.price }}</th>
<th>
<button @click="toDetail(item)">详情</button>
</th>
</tr>
</tbody>
</table>
</template>
<script setup lang="ts">
import { data } from './list.json'
import { useRouter } from 'vue-router';
const router = useRouter()
type Item = {
name: string;
price: number;
id: number;
}
const toDetail = (item: Item) => {
router.push({
path: '/reg',
query: {
id: item.id,
name: item.name,
price: item.price
}
})
}
</script>
<style scoped>
.table {
width: 400px;
}
</style>
reg.vue
<template>
<h1>
我是列表页面
</h1>
<button @click="router.back">返回</button>
<div style="font-size: 20px;">
品牌：{{ route.query.name }}
</div>
<div style="font-size: 20px;">
价格：{{ route.query.price }}
</div>
<div style="font-size: 20px;">
id： {{ route.query.id }}
</div>
</template>
<script setup lang="ts">
import { useRoute } from 'vue-router';
import { useRouter } from 'vue-router';
const router = useRouter();
const route = useRoute();
</script>
<style scoped>
.reg {
background-color: green;
height: 400px;
width: 400px;
font-size: 20px;
color: white;
}
</style>
App.vue
<template>
<h1>hello world</h1>
<hr>
<router-view></router-view>
</template>
<script setup lang="ts">
import { useRouter } from 'vue-router';
const router = useRouter();
</script>
<style scoped></style>
2. 动态路由参数（params参数）
index.ts
import { createRouter, createWebHistory, RouteRecordRaw, createWebHashHistory } from "vue-router";
const routes: Array<RouteRecordRaw> = [
{
path: "/",
name: 'Login',
component: () => import("../components/login.vue")
},
{
path: "/reg/:id",
name: 'Reg',
component: () => import("../components/reg.vue")
}
]
const router = createRouter({
history: createWebHistory(),
routes
})
export default router
reg.vue
<template>
<h1>
我是列表页面
</h1>
<button @click="router.back()">返回</button>
<div style="font-size: 20px;">
品牌：{{ item?.name }}
</div>
<div style="font-size: 20px;">
价格：{{ item?.price }}
</div>
<div style="font-size: 20px;">
id： {{ item?.id }}
</div>
</template>
<script setup lang="ts">
import { useRoute } from 'vue-router';
import { useRouter } from 'vue-router';
import { data } from './list.json';
const router = useRouter();
const route = useRoute();
// 返回对象用item接收
const item = data.find(v => v.id === Number(route.params.id))
</script>
<style scoped>
.reg {
background-color: green;
height: 400px;
width: 400px;
font-size: 20px;
color: white;
}
</style>
item?.name ，item?.price ，item?.id，他们如果不使用可选链操作符会出现报错：'__VLS_ctx.item' is possibly 'undefined'.
login.vue
<template>
<h1>
我是列表页面
</h1>
<table cellpadding="0" class="table" border="1">
<thead>
<tr>
<th>商品</th>
<th>价格</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr :key="item.id" v-for="item in data">
<th>{{ item.name }}</th>
<th>{{ item.price }}</th>
<th>
<button @click="toDetail(item)">详情</button>
</th>
</tr>
</tbody>
</table>
</template>
<script setup lang="ts">
import { data } from './list.json'
import { useRouter } from 'vue-router';
const router = useRouter()
type Item = {
name: string;
price: number;
id: number;
}
const toDetail = (item: Item) => {
router.push({
// name 对应 router 的 name
name: 'Reg',
// 不会展示在URL上，存在于内存里
params: {
id: item.id
}
})
}
</script>
<style scoped>
.table {
width: 400px;
}
</style>
注意：文章来源：https://www.toymoban.com/news/detail-647089.html
- 传递
params参数时，若使用to的对象写法，必须使用name配置项，不能用path。 - 传递
params参数时，需要提前在规则中占位。
2.1 路由的 props 配置
将路由参数作为props传给组件。文章来源地址https://www.toymoban.com/news/detail-647089.html
{
name:'xiang',
path:'detail/:id/:title/:content',
component:Detail,
// props的对象写法，作用：把对象中的每一组key-value作为props传给Detail组件。但这种写法把数据写死了，不推荐
// props:{a:1,b:2,c:3},
// props的布尔值写法，作用：把收到了每一组params参数，作为props传给Detail组件，用defineProps接收，直接使用参数
props:true
// props的函数写法，作用：把返回的对象中每一组key-value作为props传给Detail组件，用defineProps接收，直接使用参数
//props(route){
//return route.query
//}
}
<template>
<ul>
<li>{{ id }}</li>
<li>{{ title }}</li>
<li>{{ content }}</li>
</ul>
</template>
<script setup lang="ts">
defineProps(['id', 'title', 'content'])
</script>
到了这里，关于【Vue-Router】路由传参的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
