Vue路由传参的三种方式实例详解
更新时间：2023年01月19日 09:30:22 作者：Senora
vue路由传参的使用场景一般都是应用在父路由跳转到子路由时,携带参数跳转,下面这篇文章主要给大家介绍了关于Vue路由传参的三种方式,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
Vue路由传参三种方式
- params传参
- 路由属性配置传参
- query传参
一、params传参
this.$router.push({
name:"admin",
//这里的params是一个对象，id是属性名，item.id是值(可以从当前组件或者Vue实例上直接取)
params:{id:item.id}
})
//这个组件对应的路由配置
{
//组件路径
path: '/admin',
//组件别名
name: 'admin',
//组件名
component: Admin,
}
通过params传递参数，如果我们想获取 id 的参数值，可以通过this.$route.params.id这种方式来打印出来就可以得到了；
注意：获取参数的时候是 $route，跳转和传参的时候是 $router
二、路由属性配置传参：
this.$router.push({
name:"/admin/${item.id}",
})
//这个组件对应的路由配置
{
//组件路径
path: '/admin:id',
//组件别名
name: 'admin',
//组件名
component: Admin,
}
通过路由属性配置传参我们可以用this.$route.params.id来获取到 id 的值，
注意 this. $router.push 方法里面路径带的是值，路由配置项那里带的是变量名(属性名)来实现的对应；
以上两种传参方式基本上可以理解为 ajax 中的 post 请求方式，参数都是不可见的，但是上面两种方法都有一个弊端，就是当页面刷新了是获取不到参数值的，那么有没有一种方法是页面刷新之后参数依然存在呢？
三、query传参
this.$router.push({
name:"/admin",
query:{id：item.id}
})
//这个组件对应的路由配置
{
//组件路径
path: '/admin',
//组件别名
name: 'admin',
//组件名
component: Admin,
}
第三种方式是用 query 来传参，这种方式是可以解决页面刷新参数消失问题的，这种方式可以理解为是 ajax 中的 get 方法，参数是直接在 url 后面添加的，参数是可见的，所以解决页面刷新参数消失问题建议使用此方法来解决；
区别
（1）params传参
- 只能用 name，不能用 path。
- 地址栏不显示参数名称 id，但是有参数的值。
（2）query传参
- name 和 path 都能用。用 path 的时候，提供的 path 值必须是相对于根路径的相对路径，而不是相对于父路由的相对路径，否则无法成功访问。
- 地址栏显示参数格式为?id=0&code=1
特别注意
route与router的区别。route表示路由属性；router表示路由实例。
以上3种是路由传参的基本方式。除了以上几种还可以使用sessionStorage/localStorage/cookie进行存储也可以进行存储也可以，使用VUEX也行，具体因场景而异。
总结
到此这篇关于Vue路由传参的三种方式的文章就介绍到这了,更多相关Vue路由传参方式内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
通过本文,您可以了解如何使用Vue CLI创建Vue 3项目,配置Vite,利用其优势进行开发,具有一定的参考价值,感兴趣的可以了解一下2023-08-08
这篇文章主要为大家推荐了一篇值得收藏和学习的vue.js最细致的基础语法,具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-11-11
这篇文章主要介绍了vuepress实现自定义首页的样式风格，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-08-08
这篇文章主要介绍了vue+elementui实现动态控制表格列的显示和隐藏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-04-04
本文主要介绍了Vue中使用Lodash的实现示例，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-03-03
今天小编就为大家分享一篇Vue引用Swiper4插件无法重写分页器样式的解决方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
这篇文章主要介绍了vue-drag-resize与输入框/文本框冲突问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-04-04
vite官方文档中有关于多页面应用模式如果配置的说明,下面这篇文章主要给大家介绍了关于vite多页面配置的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下2022-04-04
这篇文章主要介绍了vue使用neovis操作neo4j图形数据库,本文给大家介绍了与常规做法的优缺点对比及使用技巧，对vue neo4j图形数据库相关知识感兴趣的朋友一起看看吧2022-02-02
用户在微信端中访问第三方网页,可以通过微信网页授权机制获取用户的基本信息,进而实现所需要的业务逻辑,这篇文章主要给大家介绍了关于Vue3项目中优雅实现微信授权登录的相关资料,需要的朋友可以参考下2021-09-09
最新评论