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 相关文章推荐
javascript Xml增删改查(IE下)操作实现代码
Jan 30 Javascript
jquery实现固定顶部导航效果(仿蘑菇街)
Mar 21 Javascript
javascript 禁用IE工具栏,导航栏等等实现代码
Apr 01 Javascript
javaScript中with函数用法实例分析
Jun 08 Javascript
JavaScript实现Iterator模式实例分析
Jun 09 Javascript
使用BootStrapValidator完成前端输入验证
Sep 28 Javascript
微信小程序 Storage API实例详解
Oct 02 Javascript
jQuery 遍历map()方法详解
Nov 04 Javascript
详解Js模板引擎(TrimPath)
Nov 22 Javascript
chorme 浏览器记住密码后input黄色背景处理方法(两种)
Nov 22 Javascript
微信运维交互机器人的示例代码
Nov 12 Javascript
微信小程序picker组件两列关联使用方式
Oct 27 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中var_export与var_dump的区别分析
2010/08/21 PHP
destoon找回管理员密码的方法
2014/06/21 PHP
php each 返回数组中当前的键值对并将数组指针向前移动一步实例
2016/11/22 PHP
PHP 实现人民币小写转换成大写的方法及大小写转换函数
2017/11/17 PHP
Laravel 5.5基于内置的Auth模块实现前后台登陆详解
2017/12/21 PHP
个人总结的一些关于String、Function、Array的属性和用法
2007/01/10 Javascript
用JavaScript实现UrlEncode和UrlDecode的脚本代码
2008/07/23 Javascript
jQuery中读取json文件示例代码
2013/05/10 Javascript
使用js在页面中绘制表格核心代码
2013/09/16 Javascript
Js获取数组最大和最小值示例代码
2013/10/29 Javascript
Javascript 实现复制(Copy)动作方法大全
2014/06/20 Javascript
js选择并转移导航菜单示例代码
2014/08/19 Javascript
js实现点击获取验证码倒计时效果
2021/01/28 Javascript
jQuery CSS3自定义美化Checkbox实现代码
2016/05/12 Javascript
jQuery插件EasyUI实现Layout框架页面中弹出窗体到最顶层效果(穿越iframe)
2016/08/05 Javascript
JavaScript 数组的深度复制解析
2016/11/02 Javascript
原生js实现吸顶效果
2017/03/13 Javascript
Node.js开发之套接字(socket)编程入门示例
2019/11/05 Javascript
原生js实现简单轮播图
2020/10/26 Javascript
[01:30]DOTA2上海特锦赛现场采访 Loda倾情献唱
2016/03/25 DOTA
[47:20]DAC2018 4.4 淘汰赛 Optic vs Mineski 第一场
2018/04/05 DOTA
Python实现的ini文件操作类分享
2014/11/20 Python
python继承和抽象类的实现方法
2015/01/14 Python
Python计算三维矢量幅度的方法
2015/06/15 Python
Python文件和流(实例讲解)
2017/09/12 Python
基于python指定包的安装路径方法
2018/10/27 Python
python制作朋友圈九宫格图片
2019/11/03 Python
英国知名化妆品网站:Revolution Beauty(原TAM Beauty)
2018/02/28 全球购物
Agoda台湾官网:国内外订房2折起
2018/03/20 全球购物
中文系学生自荐信范文
2013/11/13 职场文书
家具厂厂长岗位职责
2014/01/01 职场文书
优秀求职信
2014/05/29 职场文书
2019大学生社会实践报告汇总
2019/08/16 职场文书
班干部竞选演讲稿(精选5篇)
2019/09/24 职场文书
Golang 获取文件md5校验的方法以及效率对比
2021/05/08 Golang
Golang 并发编程 SingleFlight模式
2022/04/26 Golang