vue router传参方式,vue-router传递参数的几种方式
本文主要介绍vue3的参数jump router传输方式，有很好的参考价值。希望对大家有帮助。如有错误或不足之处，请不吝赐教。
目录
携带参数跳转路由器参数传递原理demovue路由跳转，第一种携带和获取参数的方式和第二种方式。
携带参数跳转router传参
点击a页的按钮，携带参数跳转到b页。
原理
导入路由器从“vue-router”导入{ user outer }；a页传输router.push({})B页接收route . params . num；
demo
route.js
{ path: /A ，name:A ，component:()=import( pages/A . vueb )}，
{路径：/B ，名称： B ，组件：()=import(pages/B.vue) }
A页面
模板
按钮@click=go 跳转/按钮
/模板
脚本
从“vue-router”导入{ user outer }；
导出默认值({
设置(道具、ctx) {
//router是全局路由对象，route=userRoute()是当前路由对象。
let router=user outer()；
const go=()={
router.push({
//如果params用于传递参数，则只能通过名称指定(名称在route.js中声明)
姓名： B ，
参数：{
数字：1
}
/*如果使用query，可以指定路径或名称。
路径：“/home”，
查询：{
数字：1
} */
})
}
返回{
去吧，
}
}
})
/脚本
B页面
模板
{{ num }}
/模板
脚本
从“vue路由器”导入{ user oute }；
导出默认值{
设置(道具、ctx) {
//router是全局路由对象，route=userRoute()是当前路由对象。
let route=user oute()；
const num=route . params . num；
console . log(num)；
返回{
num，
};
},
};
/脚本
vue路由跳转，参数的携带与获取
//参数可以通过以下两种方式携带
这个。$ router . push({ name: order detail ，params:{id:14} })
(2)这个。$ router . push({ path:/microsoftware/order detail ，params:{id:14} })
//获取上述顺序对应的参数
这个。$route.params.id
(2)这个。$route.query.id
第一种方式
(url地址后面没有拼接携带的参数；数据是保密的，但是应该在路由表中配置名称属性。
(2)但跳转到相应页面后，刷新此页面所携带的参数会丢失。如果根据携带的参数获取数据，会有一些问题。
第二种方式
(1)将携带的参数拼接在url地址后面；无需在路由表中配置名称属性
(2)跳转到相应页面后，刷新页面不会导致上一页携带的参数丢失。
以上方法可根据项目需要选择。
我一般选择第二种方法。一般url后面拼接的都是不重要的数据。最重要的是不会出现页面刷新和携带数据丢失的情况。
嗯，这些只是个人经历。希望给大家一个参考，支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。