【Vue-Router】路由传参

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. 动态路由参数

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 的 namename: 'Reg',// 不会展示在URL上，存在于内存里params: {id: item.id}})
}
</script><style scoped>
.table {width: 400px;
}
</style>