目录

一、vue3路由及传参

1.介绍

2、query传参

3、params

---

一、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'