vue router使用query和params传参的使用和区别


Posted in Javascript onNovember 13, 2017

写在前面:

传参是前端经常需要用的一个操作,很多场景都会需要用到上个页面的参数,本文将会详细介绍vue router 是如何进行传参的,以及一些小细节问题。有需要的朋友可以做一下参考,喜欢的可以点波赞,或者关注一下,希望可以帮到大家。

Vue router如何传参

params、query是什么?

params:/router1/:id ,/router1/123,/router1/789 ,这里的id叫做params

query:/router1?id=123 ,/router1?id=456 ,这里的id叫做query。

路由界面:

router.js:

路由设置这里,当你使用params方法传参的时候,要在路由后面加参数名,并且传参的时候,参数名要跟路由后面设置的参数名对应。使用query方法,就没有这种限制,直接在跳转里面用就可以。

vue router使用query和params传参的使用和区别 

注意:如果路由上面不写参数,也是可以传过去的,但不会在url上面显示出你的参数,并且当你跳到别的页面或者刷新页面的时候参数会丢失(如下图所示),那依赖这个参数的http请求或者其他操作就会失败。

vue router使用query和params传参的使用和区别 

注意看上面的路由参数,id这个参数是我们有设置在路由上面的,id2我没有设置在路由里面,所以刷新之后id2就不见了,在项目中,我们总不可能要求用户不能刷新吧。

组件1:

<template>
 <div class="app_page">
 <h1>从这个路由传参到别的路由</h1>
 <router-link :to="{ name:'router1',params: { id: status ,id2: status3},query: { queryId: status2 }}" >
  router-link跳转router1
 </router-link>
 </div>
</template>
<script>
export default {
 name: 'app_page',
 data () {
 return {
  status:110,
  status2:120,
  status3:119
 }
 },
}
</script>

编程式导航跳转:

上面的router-link传参,也可以使用router文档里面的编程式导航来跳转传参。

this.$router.push({ name:'router1',params: { id: status ,id2: status3},query: { queryId: status2 }});
//编程跳转写在一个函数里面,通过click等方法来触发

这两种传参效果是一模一样的,编程式导航,可以用来做判断跳转,比如是否授权,是否登录,等等状态,对此不太了解的小伙伴们,可以跳过这个编程式导航,以后再来看。

组件2:

<template>
 <div class="router1">
 <h1>接收参数的路由</h1>
 <h1> params.id:{{ $route.params }}</h1>
 <h1>query.status:{{ $route.query.queryId }}</h1>
 <keep-alive>
  <router-view></router-view>
 </keep-alive>
 </div>
</template>

传参还是比较简单的,按着上面组件的使用方法就可以成功传过去了。

提示:获取路由上面的参数,用的是$route,后面没有r。

params传参和query传参有什么区别: 

1、用法上的

刚query要用path来引入,params要用name来引入,接收参数都是类似的,分别是this.$route.query.name和this.$route.params.name。

注意接收参数的时候,已经是$route而不是$router了哦!!

2、展示上的

query更加类似于我们ajax中get传参,params则类似于post,说的再简单一点,前者在浏览器地址栏中显示参数,后者则不显示

query:

vue router使用query和params传参的使用和区别      

params:vue router使用query和params传参的使用和区别

3、params是路由的一部分,必须要有。query是拼接在url后面的参数,没有也没关系。

params一旦设置在路由,params就是路由的一部分,如果这个路由有params传参,但是在跳转的时候没有传这个参数,会导致跳转失败或者页面会没有内容。

比如:跳转/router1/:id

<router-link :to="{ name:'router1',params: { id: status}}" >正确</router-link>
<router-link :to="{ name:'router1',params: { id2: status}}">错误</router-link>

4、params、query不设置也可以传参,params不设置的时候,刷新页面或者返回参数会丢失,这一点的在上面说过了

后话:

本文到这里就结束了,写的不好的地方,请各位大佬们见谅。以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery编辑器KindEditor4.1.4代码高亮显示设置教程
Mar 01 Javascript
JavaScript中创建类/对象的几种方法总结
Nov 29 Javascript
append和appendTo的区别以及appendChild用法
Dec 24 Javascript
JavaScript控制各种浏览器全屏模式的方法、属性和事件介绍
Apr 03 Javascript
javascript委托(Delegate)blur和focus用法实例分析
May 26 Javascript
z-blog SyntaxHighlighter 长代码无法换行解决办法(基于jquery)
Nov 18 Javascript
JS栈stack类的实现与使用方法示例
Jan 31 Javascript
layer弹出层扩展主题的方法
Sep 11 Javascript
解决layer弹出层msg的文字不显示的问题
Sep 11 Javascript
JS array数组检测方式解析
May 19 Javascript
vue实现从外部修改组件内部的变量的值
Jul 30 Javascript
Vue.js使用axios动态获取response里的data数据操作
Sep 08 Javascript
vue+vue-validator 表单验证功能的实现代码
Nov 13 #Javascript
jQuery除指定区域外点击任何地方隐藏DIV功能
Nov 13 #jQuery
Angular实现表单验证功能
Nov 13 #Javascript
mescroll.js上拉加载下拉刷新组件使用详解
Nov 13 #Javascript
Vue.js用法详解
Nov 13 #Javascript
利用HBuilder打包前端开发webapp为apk的方法
Nov 13 #Javascript
JS实现提交表单前的数字及邮箱校检功能
Nov 13 #Javascript
You might like
PHP小教程之实现双向链表
2014/06/12 PHP
PHP mysql事务问题实例分析
2016/01/18 PHP
Symfony2框架学习笔记之表单用法详解
2016/03/18 PHP
thinkPHP显示不出验证码的原因与解决方法分析
2017/05/20 PHP
Yii2 中实现单点登录的方法
2018/03/09 PHP
用JS写的一个TableView控件代码
2010/01/23 Javascript
js 兼容多浏览器的回车和鼠标焦点事件代码(IE6/7/8,firefox,chrome)
2010/04/14 Javascript
Jquery显示、隐藏元素以及添加删除样式
2013/08/09 Javascript
JavaScript使用cookie实现记住账号密码功能
2015/04/27 Javascript
JS常见简单正则表达式验证功能小结【手机,地址,企业税号,金额,身份证等】
2017/01/22 Javascript
Angular.js实现动态加载组件详解
2017/05/28 Javascript
JavaScript中set与get方法用法示例
2018/08/15 Javascript
新年快乐! javascript实现超级炫酷的3D烟花特效
2019/01/30 Javascript
vue模仿网易云音乐的单页面应用
2019/04/24 Javascript
vue全屏事件开发详解
2020/06/17 Javascript
JS访问对象两种方式区别解析
2020/08/29 Javascript
Antd下拉选择,自动匹配功能的实现
2020/10/24 Javascript
详解Django框架中用户的登录和退出的实现
2015/07/23 Python
Python学习笔记之解析json的方法分析
2017/04/21 Python
centos6.4下python3.6.1安装教程
2017/07/21 Python
Python用户推荐系统曼哈顿算法实现完整代码
2017/12/01 Python
Opencv实现抠图背景图替换功能
2019/05/21 Python
Python .py生成.pyd文件并打包.exe 的注意事项说明
2021/03/04 Python
HTML5 WebGL 实现民航客机飞行监控系统
2019/07/25 HTML / CSS
Chupi官网:在爱尔兰手工制作的订婚、结婚戒指和精美珠宝
2020/09/28 全球购物
linux比较文件内容的命令是什么
2015/09/23 面试题
介绍下static、final、abstract区别
2015/01/30 面试题
简历中自我评价分享
2013/10/09 职场文书
名人演讲稿范文
2013/12/28 职场文书
在校生自我鉴定
2014/01/23 职场文书
上班玩游戏检讨书
2014/02/07 职场文书
大学生个人求职信
2014/06/02 职场文书
高中教师个人工作总结
2015/02/10 职场文书
golang如何去除多余空白字符(含制表符)
2021/04/25 Golang
Android中的Launch Mode详情
2022/06/05 Java/Android
oracle设置密码复杂度及设置超时退出的功能
2022/06/28 Oracle