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 相关文章推荐
符合W3C网页标准的iframe标签的使用方法
Jul 19 Javascript
使用JavaScript 实现对象 匀速/变速运动的方法
May 08 Javascript
js获取当前时间显示在页面上并每秒刷新
Dec 24 Javascript
高性能JavaScript DOM编程(1)
Aug 11 Javascript
基于jQuery+PHP+Mysql实现在线拍照和在线浏览照片
Sep 06 Javascript
设计模式中的组合模式在JavaScript程序构建中的使用
May 18 Javascript
jQuery插件FusionCharts实现的Marimekko图效果示例【附demo源码】
Mar 24 jQuery
Angular.js中ng-include用法及多标签页面的实现方式详解
May 07 Javascript
vue2.0 根据状态值进行样式的改变展示方法
Mar 13 Javascript
详解关于vue2.0工程发布上线操作步骤
Sep 27 Javascript
vue axios请求频繁时取消上一次请求的方法
Nov 10 Javascript
canvas绘制折线路径动画实现
May 12 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
收音机玩机评测 406 篇视频合集
2020/03/11 无线电
PHP+jQuery 注册模块开发详解
2014/10/14 PHP
JSONP 跨域访问代理API-yahooapis实现代码
2012/12/02 Javascript
angularJS Provider、factory、service详解及实例代码
2016/09/21 Javascript
vue-axios使用详解
2017/05/10 Javascript
利用Javascript实现一套自定义事件机制
2017/12/14 Javascript
详解angular脏检查原理及伪代码实现
2018/06/08 Javascript
使用vue-router切换页面时,获取上一页url以及当前页面url的方法
2019/05/06 Javascript
vue实现抖音时间转盘
2019/09/08 Javascript
微信小程序 flexbox layout快速实现基本布局的解决方案
2020/03/24 Javascript
jQuery AJAX应用实例总结
2020/05/19 jQuery
[59:35]DOTA2上海特级锦标赛主赛事日 - 3 败者组第三轮#1COL VS Alliance第二局
2016/03/04 DOTA
Python程序语言快速上手教程
2012/07/18 Python
使用XML库的方式,实现RPC通信的方法(推荐)
2017/06/14 Python
python使用邻接矩阵构造图代码示例
2017/11/10 Python
Python利用turtle库绘制彩虹代码示例
2017/12/20 Python
pycharm 安装JPype的教程
2019/08/08 Python
Python搭建代理IP池实现检测IP的方法
2019/10/27 Python
Python&amp;&amp;GDAL实现NDVI的计算方式
2020/01/09 Python
python读取配置文件方式(ini、yaml、xml)
2020/04/09 Python
Python如何实现自带HTTP文件传输服务
2020/07/08 Python
让你相见恨晚的十个Python骚操作
2020/11/18 Python
详解使用python爬取抖音app视频(appium可以操控手机)
2021/01/26 Python
纯CSS3大转盘抽奖示例代码(响应式、可配置)
2017/01/13 HTML / CSS
英国婴儿和儿童服装网站:Vertbaudet
2018/04/02 全球购物
孝老爱亲模范事迹
2014/01/24 职场文书
实习推荐信
2014/05/10 职场文书
课外小组活动总结
2014/08/27 职场文书
单位委托书怎么写
2014/09/21 职场文书
说好普通话圆梦你我他演讲稿
2014/09/21 职场文书
部门经理迟到检讨书
2015/02/16 职场文书
大学感恩节活动总结
2015/05/05 职场文书
论语读书笔记
2015/06/26 职场文书
公司保洁员管理制度
2015/08/04 职场文书
教师廉政准则心得体会
2016/01/20 职场文书
我对PyTorch dataloader里的shuffle=True的理解
2021/05/20 Python