vue3路由及传参

最新推荐文章于 2024-03-22 15:24:55 发布

鱼空

最新推荐文章于 2024-03-22 15:24:55 发布

阅读量7.4k

点赞数 2

文章标签：前端 javascript html5

本文链接：https://blog.csdn.net/m0_69502730/article/details/126513513

版权

一、vue3路由及传参

1.介绍

vue3路由和vue2几乎一样，只不过在传参形式上略有改变

vue2路由传参：query,params

2、query传参

path配合
刷新页面参数不丢失
代码演示：

 A页传参：
 <router-link :to="{path:'/detail',query:{id:'1001'} }">到详情页</router-link>
 
 
B页接参：
import { useRoute } from 'vue-router'

//获取参数
const route = useRoute()
console.log('route:', route.query.id)

3、params

和name配合
刷新页面参数会丢失
演示代码：

 A页传参：
 <router-link :to="{name:'detail',params:{id:'1001'} }">到详情页</router-link>
 
 
B页接参：
import { useRoute } from 'vue-router'

//获取参数
const route = useRoute()
console.log('route:', route.params.id)

router index.js里
path:'/detail:id'