vue3中,通过路由传参的几种形式
vue3中,通过路由传参的几种方式
·
1.query传参
// 在路由信息中,path需要配置如下内容
{
path: "/test",
component: () => import("@/views/text/index.vue"),
name: "Test",
meta: {
title: "测试模块",
},
}
// 组件1中传参给组件2
// 组件1
const query = { id: 1, name: '张三' }
router.push({ path: '/test', query })
// 组件2【接收参数】
import { useRoute} from 'vue-router'
const route = useRoute()
console.log(route.query)
2.params传参【vue3中已基本放弃该方法】
// 在路由信息中,path需要配置如下内容
{
path: "/test/:id", // 注意,此处一旦配置参数,凡是进入此路由时,都需要传参,否则报错
component: () => import("@/views/text/index.vue"),
name: "Test",
meta: {
title: "测试模块",
},
}
// 组件1中传参给组件2
// 组件1
router.push({
name: 'Test', // 注意此处使用的是“name”
params: {
id: 1
}
})
// 组件2【接收参数】
import { useRoute} from 'vue-router'
const route = useRoute()
console.log(route.params) // { id: 1 }
3.state传参
// 在路由信息中,path需要配置如下内容
{
path: "/test",
component: () => import("@/views/text/index.vue"),
name: "Test",
meta: {
title: "测试模块",
},
}
// 组件1中传参给组件2
// 组件1
const state= { id: 1, name: '张三' }
router.push({ path: '/test', state })
// 组件2【接收参数】
// 直接接收使用即可
console.log(history?.state?.id)
console.log(history?.state?.name)
vue3中几种传参的优缺点:
优点:通过路由传参时,参数值都是持久存储的,除非手动改变地址,另外,通过state传参时,参数不会暴露在地址中;
query传参时,参数会暴露在地址栏,params传参时,需要在路由信息中配置参数名称,且参数值也会在地址中暴露,相对繁琐
以上内容是本人在开发过程中的积累,如有雷同,纯属巧合。如有错误,欢迎在评论区指出,谢谢!
更多推荐
已为社区贡献6条内容
所有评论(0)