前言:在负责客户管理系统时,由客户列表页跳转入客户详情页时,需要传不同客户的id来渲染不同信息的客户详情信息,这时就需要 vue-router 的 route 进行传值。
1.声明系统的vue版本为vue3组合式,也就是<script setup>。
2.首先需要安装 vue-router。
npm install vue-router
3.在客户列表页的<script setup>中引入vue-router、
import { RouterLink ,useRouter,useRoute} from 'vue-router'
4.定义使用 router进行路由跳转 使用 route进行路由传值。
const router = useRouter() const route = useRoute();
5.定义传入客户详情页的id值
let boid = route.query.id
6.利用vue 的点击事件进行传值并跳转@click="details(item.id)"
function details(id){ boid = id router.push({path:'/mobileIndex/businessDetail',query:{id:boid}}) }
7.在客户详情页定义接收传入的值
import { RouterLink ,useRouter,useRoute} from 'vue-router' const router = useRouter() const route = useRoute(); let boid = route.query.id
8.最后在 <script setup>中打印console.log(boid),就可以获取到传入的不同客户的id值啦!