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编辑器和代码格式化
Apr 25 Javascript
jQuery处理xml格式的返回数据(实例解析)
Nov 28 Javascript
js打开新窗口方法整理
Feb 17 Javascript
jquery库或JS文件在eclipse下报错问题解决方法
Apr 17 Javascript
js生成的验证码的实现与技术分析
Sep 17 Javascript
JavaScript实现格式化字符串函数String.format
Dec 16 Javascript
整理关于Bootstrap过渡动画的慕课笔记
Mar 29 Javascript
浅谈JS中几种轻松处理'this'指向方式
Sep 16 Javascript
微信小程序引入VANT组件的方法步骤
Sep 19 Javascript
vue quill editor 使用富文本添加上传音频功能
Jan 14 Javascript
为react组件库添加typescript类型提示的方法
Jun 15 Javascript
js实现模拟购物商城案例
May 18 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
可快速识别放射性物质-国外大神教你diy一个开放式辐射探测器
2020/03/12 无线电
用PHP制作静态网站的模板框架(一)
2006/10/09 PHP
PHP 防恶意刷新实现代码
2010/05/16 PHP
php实现用户注册密码的crypt加密
2017/06/08 PHP
javascript高级程序设计第二版第十二章事件要点总结(常用的跨浏览器检测方法)
2012/08/22 Javascript
jquery获取元素值的方法(常见的表单元素)
2013/11/15 Javascript
使用jquery实现以post打开新窗口
2014/03/19 Javascript
jQuery中on()方法用法实例
2015/01/19 Javascript
基于JQuery和CSS3实现仿Apple TV海报背景视觉差特效源码分享
2015/09/21 Javascript
javascript移动开发中touch触摸事件详解
2016/03/18 Javascript
jquery checkbox无法用attr()二次勾选问题的解决方法
2016/07/22 Javascript
js实现贪吃蛇小游戏(容易理解)
2017/01/22 Javascript
js鼠标移动时禁止选中文字
2017/02/19 Javascript
jQuery选择器之子元素选择器详解
2017/09/18 jQuery
jQuery中过滤器的基本用法示例
2017/10/11 jQuery
vue2组件之select2调用的示例代码
2017/10/12 Javascript
nodejs搭建本地服务器并访问文件操作示例
2019/05/11 NodeJs
vue.js实现三级菜单效果
2019/10/19 Javascript
[01:17]辉夜杯战队访谈宣传片—EHOME
2015/12/25 DOTA
Python中replace方法实例分析
2014/08/20 Python
使用Python实现BT种子和磁力链接的相互转换
2015/11/09 Python
python批量导入数据进Elasticsearch的实例
2018/05/30 Python
python微信公众号之关键词自动回复
2018/06/15 Python
python实现录音小程序
2020/10/26 Python
opencv python统计及绘制直方图的方法
2019/01/21 Python
Python 通过requests实现腾讯新闻抓取爬虫的方法
2019/02/22 Python
python挖矿算力测试程序详解
2019/07/03 Python
Django 源码WSGI剖析过程详解
2019/08/05 Python
Python API 操作Hadoop hdfs详解
2020/06/06 Python
使用phonegap克隆和删除联系人的实现方法
2017/03/31 HTML / CSS
Ruby中的保护方法和私有方法与一般面向对象程序设计语言的一样吗
2013/05/01 面试题
幼师求职信
2014/06/23 职场文书
社区节水倡议书
2015/04/29 职场文书
Go语言中break label与goto label的区别
2021/04/28 Golang
海贼王十大逆天果实 魂魂果实上榜,岩浆果实攻击力最强
2022/03/18 日漫
漫画《尖帽子的魔法工坊》宣布动画化
2022/04/06 日漫