Vue路由传递query参数两种方式
更新时间：2023年06月05日 08:37:39 作者：小花皮猪
路由是可以传递参数的，一般使用query进行传参，有两种方式，本温酒通过代码示例给大家介绍这两种传递方式，感兴趣的小伙伴可以参考阅读
路由传递query参数两种方式
路由是可以传递参数的，一般使用query进行传参，有两种方式，接下来一一展示
1 案例展示
先编写一个简单的案例
我这里用的一个三级路由
这里使用三级路由以及展示路由视图
这样点击就跳转对应的路径了，接下来进行路由跳转的时候传参即可
2 路由传参
路由可以传递两种参数形式，一种是query字符串形式参数，一种是对象形式参数，下面进行说明
方式1：字符串传参(不推荐)
参数和ajax或axios发送的query参数几乎一致,写法基本和和ajax一致，都是 url?key=value&拼接参数的格式，例如：
<router-link to="/home/message/detail?id=1&title=你好">
路径上也会有所体现
传递完的参数就到$route的query里面，这里我在组件挂载的时候输出了一个vc实例
可以在$route的query里面找到参数
接收路由参数
想要接收使用参数，也直接从$route的query里面获取即可
但是现在参数是死的，所以需要从表达式里面传递
表达式错误传参
注意，在使用到表达式传参的场景时，切不可使用下面两种传递方式
这样就会直接当前字符串解析
也不可以直接使用:to的方式，这样会解析成一个表达式，无法识别报错
表达式正确传参
正确的做法应该是加上``并且使用$进行拼接传递
<!-- 跳转路由并携带query参数 to的字符串写法 -->
<router-link :to="`/home/message/detail?id=${msg.id}&title=${msg.title}`">{{msg.title}}</router-link> 接收参数还是从$route的query里面获取，这样就可以完成使用query方式参数
但是query这种拼接方式有些复杂，所以有了第二种传参方式，使用对象传参
方式2：对象传参(推荐)
对象方式进行传参，既然现在to是一个对象，那么有几个属性可以使用
path:想去哪里跳转
query:它是一个对象，在对象里面配置参数
<!-- 跳转路由并携带query参数 to的对象写法 -->
<router-link :to="{
path:'/home/message/detail',
query:{id:msg.id,title:msg.title}
}">这种写法清晰明了，推荐使用
3 总结
1 传递参数
<!-- 跳转并携带query参数，to的字符串写法 -->
<router-link :to="/home/message/detail?id=666&title=你好">跳转</router-link>
<!-- 跳转并携带query参数，to的对象写法 -->
<router-link
:to="{
path:'/home/message/detail',
query:{
id:666,
title:'你好'
}
}"
>跳转</router-link>2 接收参数
$route.query.id $route.query.title
以上就是Vue路由传递query参数两种方式的详细内容，更多关于Vue路由传递query的资料请关注脚本之家其它相关文章！
相关文章
这篇文章主要为大家介绍了前端axios取消请求总结示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-10-10
这篇文章主要介绍了vue实现编辑器键盘抬起时内容跟随光标距顶位置向上滚动效果，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2020-05-05
在new Vue的配置参数中的computed和methods都可以处理大量的逻辑代码，但是什么时候用哪个属性，要好好区分一下才能做到正确的运用vue。这篇文章主要介绍了Vue中method与computed的区别,需要的朋友可以参考下2018-03-03
Vuex是专为Vue.js应用程序开发的状态管理模式，这篇文章主要介绍了Vuex的属性，本文通过示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2022-08-08
今天小编就为大家分享一篇Vue 解决多级动态面包屑导航的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-11-11
这篇文章主要介绍了关于el-scrollbar滚动条初始化不显示的问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-08-08
这篇文章主要介绍了关于json-bigint处理大数字问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-05-05
这篇文章主要介绍了vue中ref和reactive的区别及说明,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-08-08
vue使用svg文件补充-svg放大缩小操作(使用d3.js)
这篇文章主要介绍了vue使用svg文件补充-svg放大缩小操作(使用d3.js)，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-09-09
这篇文章主要介绍了Vue中的计算属性和axios基本使用回顾，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-01-01
最新评论