带你玩转路由跳转并传值

前言：在负责开发客户管理系统时，由客户列表页跳转入客户详情页时，需要传不同客户的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值啦！