vue路由传参及获取参数的方式总结
更新时间：2023年05月25日 09:25:10 作者：kksw1121
这篇文章主要介绍了vue路由传参及获取参数的方式总结，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
vue路由传参及获取参数方式
方法一
动态路由（这里用来测试，传了两个参数username和post_id）
//路由配置
{
path: '/user/:username/:post_id',
name: 'User',
component: User
}//跳转
this.$router.push({
path: `/user/${username}/${post_id}`,
})匹配路径：/user/evan/123
传递的参数：{ username: 'evan', post_id: '123' }
//获取参数 this.$route.params.username this.$route.params.post_id
方法二
通过路由属性中的name来确定匹配的路由，通过params来传递参数。
//路由配置
{
path: '/user',
name: 'User',
component: User
}//js跳转
this.$router.push({
name: 'User',
params: {
id: id
}
})<!--html跳转-->
<router-link :to="{name:'User',params:{id:3}}"><span>跳转</span></router-link>js获取参数：this.$route.params.id
html获取参数： {{$route.params.id}}
方法三
使用path来匹配路由，然后通过query来传递参数，参数显示在地址栏上，并用?号和&号拼接的
//路由配置
{
path: '/user',
name: 'User',
component: User
}//js跳转
this.$router.push({
path: '/user',
query: {
id: id
}
})<!--html跳转--> <router-link to="/user?id=1"><span>跳转</span></router-link>
js获取参数：this.$route.query.id
html获取参数： {{$route.query.id}}
- 参数是对象的时候使用params传参
- 参数是字符串拼接的时候使用query传参
vue路由传递参数，刷新页面后参数丢失
在用vue做项目的时候，发现在新页面刷新后，上一页面带过来的参数会丢失，查阅资料才发现原来自己对params和query理解不透彻
下面是两种传参方法：
1.用 params 传参
需要路由里加上这个参数
this.$router.push({name:'list', params:{id: id}});
routes: [
{
path: '/list/:id',
name: 'list'
}
]可以通过 this.$route.params.id 来获取
2.可以将参数写到路径里
this.$router.push({path: '/folder/file', query: {id: list.id, name: list.name}})可以通过 this.$route.query.id 来获取
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了Vue数据驱动表单渲染,轻松搞定form表单,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2019-07-07
这篇文章主要介绍了vue+iview 兼容IE11浏览器的实现方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-01-01
本文中，我们主要介绍Cesium在Vue3运行环境的配置，及Cesium实例中控件的显隐设置，本项目基于pnpm安装，也可使用其他包管理器进行安装，如npm或yarn，本文通过示例代码对vue初始化Cesium地图相关知识介绍的非常详细，需要的朋友参考下吧2023-07-07
这篇文章主要为大家详细介绍了Vue.js事件处理器与表单控件绑定详解的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-03-03
elmentui是一款为vue设计的桌面组件库,下面这篇文章主要给大家介绍了关于解决vue3使用element-ui的具体操作,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-08-08
这篇文章主要介绍了vue-cli创建的项目中的gitHooks原理解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-02-02
这篇文章主要介绍了vue 解决addRoutes多次添加路由重复的操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-08-08
这篇文章主要介绍了Vue实现商品详情页的评价列表功能，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2019-09-09
Vue的Router是一个用于实现页面跳转和路由管理的插件,它可以帮助我们根据不同的URL请求加载不同的组件,以及实现前端路由功能,本文给大家介绍vue中的Router基本配置命令,感兴趣的朋友跟随小编一起看看吧2024-02-02
今天小编就为大家分享一篇vue二级菜单导航点击选中事件的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
最新评论