vue 中的动态传参和query传参操作


Posted in Javascript onNovember 09, 2020

Vue router 如何传参

params、query 是什么?

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

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

query 方式传参和接收参数

传参: this.$router.push({ path:'/xxx' query:{ id:id } }) this.$router.push 传参时, 并不会引起页面刷新。需要重新请求数据,代码如下。

<div>shopName:{{shop.shopName}}</div>
export default{
 data(){
  return {
   shop:{shopName:"shopName"},
   shopNo:"123"
  };
 },
 mounted(){
  // 初始时加载店铺数据
  this.loadShop();
 },
 watch:{
  // shopNo改变时重新加载
  shopNo:function(newShopNo){
   this.loadShop();
  }
 },
 methods:{
  loadShop(){
   // 调用API获取shop数据
   var shop = {/*获取到的数据*/};
   this.shop=shop;
  }
 }
}

接收参数: this.$route.query.id

params 方式传参和接收参数

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

vue 中的动态传参和query传参操作

传参: this.$router.push({ name:'xxx' params:{ id:id } })

接收参数: this.$route.params.id

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

query 传参和 params 传参的区别

用法上的: query 要用 path 来引入,params 要用 name 来引入,接收参数都是类似的,分别是 this.$route.query.name 和 this.$route.params.name。注意接收参数的时候,已经是$route 而不是$router 了哦!!

展示上的: query 更加类似于我们 ajax 中 get 传参,params 则类似于 post,说的再简单一点,前者在浏览器地址栏中显示参数,后者则不显示所以两者不能同时使用!!!

router-link 和编程式导航两种跳转方式

通过 router-link 我们可以向路由到的组件传递参数,这在我们实际使用中时非常重要的。

编程式导航

vue 中的动态传参和query传参操作

router.push

router.replace 和 router.push()不同,使用 router.replace()会将一个访问记录 push 到 url 中,所以再退回了的时候一定会回到这里,而 router.replace()不是添加一个新的进入,而是替换栈顶元素,这样,在返回的时候,就会返回到栈顶元素的下面一个。

router.go

在浏览器记录中前进一步,等同于 history.forward() router.go(1)

后退一步记录,等同于 history.back() router.go(-1)

动态传参之坑

注意:params 传参,push 里面只能是 name:'xxxx',不能是 path:'/xxx',因为 params 只能用 name 来引入路由,如果这里写成了 path,接收参数页面会是 undefined!!!

补充知识:vue三种动态传参的方式

如下场景:

<el-table-column
  label="操作">
  <template slot-scope="scope">
   <el-button size="mini" type="primary" @click="goList(scope.row.id)">个人信息表</el-button>
  </template>
 </el-table-column>

.直接占位符的方式

goList(id){ 
 this.$router.push({path:`/line/${id}`}) 
}

需要对应路由配置如下:

{
  path:'/line/:id',
  name:'line',
  component:line
  }

二、通过路由属性中的name来确定匹配的路由,通过params来传递参数

goList(id){ 
  this.$router.push({ name:"line",params:{ orderId:id }}) 
}

对应路由配置如下:

{
  path:'/line',
  name:'line',
  component:line
}

三、通过 path来匹配路由,然后通过query来传递参数,传递的参数会暴露在地址栏中

goList(id){ 
 this.$router.push({ path: '/line',query: { orderId:id }})
}

对应路由配置同二

以上这篇vue 中的动态传参和query传参操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
遍历jquery对象的代码分享
Nov 02 Javascript
循环 vs 递归浅谈
Feb 28 Javascript
JS图片自动轮换效果实现思路附截图
Apr 30 Javascript
JavaScript将一个数组插入到另一个数组的方法
Mar 19 Javascript
js实现每日自动换一张图片的方法
May 04 Javascript
关于js里的this关键字的理解
Aug 17 Javascript
jquery pagination分页插件使用详解(后台struts2)
Jan 22 Javascript
Angular中ng-bind和ng-model的区别实例详解
Apr 10 Javascript
jQuery实现使用sort方法对json数据排序的方法
Apr 17 jQuery
element-ui 的el-button组件中添加自定义颜色和图标的实现方法
Oct 26 Javascript
JS实现简单的文字无缝上下滚动功能示例
Jun 22 Javascript
小程序中手机号识别的示例
Dec 14 Javascript
你不知道的SpringBoot与Vue部署解决方案
Nov 09 #Javascript
在vue中使用eslint,配合vscode的操作
Nov 09 #Javascript
原生JavaScript实现五子棋游戏
Nov 09 #Javascript
Nuxt的动态路由和参数校验操作
Nov 09 #Javascript
jQuery实现移动端扭蛋机抽奖
Nov 08 #jQuery
JS实现炫酷轮播图
Nov 15 #Javascript
JS实现购物车基本功能
Nov 08 #Javascript
You might like
PHP实时显示输出
2008/10/02 PHP
php access 数据连接与读取保存编辑数据的实现代码
2010/05/12 PHP
兼容firefox,chrome的网页灰度效果
2011/08/08 PHP
php中unlink()、mkdir()、rmdir()等方法的使用介绍
2012/12/21 PHP
深入phpMyAdmin的安装与配置的详细步骤
2013/05/07 PHP
基于php设计模式中工厂模式详细介绍
2013/05/15 PHP
php中cookie的使用方法
2014/03/29 PHP
PHP-Java-Bridge使用笔记
2014/09/22 PHP
php导出CSV抽象类实例
2014/09/24 PHP
js绑定事件this指向发生改变的问题解决方法
2013/04/23 Javascript
基于jQuery+PHP+Mysql实现在线拍照和在线浏览照片
2015/09/06 Javascript
EasyUi中的Combogrid 实现分页和动态搜索远程数据
2016/04/01 Javascript
JS给Array添加是否包含字符串的简单方法
2016/10/29 Javascript
浅析使用BootStrap TreeView插件实现灵活配置快递模板
2016/11/28 Javascript
zTree树形插件异步加载方法详解
2017/06/14 Javascript
详解基于vue的移动web app页面缓存解决方案
2017/08/03 Javascript
Nodejs实现图片上传、压缩预览、定时删除功能
2019/10/25 NodeJs
jQuery实现滑动星星评分效果(每日分享)
2019/11/13 jQuery
简单了解Vue + ElementUI后台管理模板
2020/04/07 Javascript
解决vue-router 切换tab标签关闭时缓存问题
2020/07/22 Javascript
JavaScript中跨域问题的深入理解
2021/03/04 Javascript
Django框架orM与自定义SQL语句混合事务控制操作
2019/06/27 Python
python如何保证输入键入数字的方法
2019/08/23 Python
pytorch查看torch.Tensor和model是否在CUDA上的实例
2020/01/03 Python
HolidayLettings英国:预订最好的度假公寓、别墅和自助式住宿
2019/08/27 全球购物
教育实习生的自我评价分享
2013/11/21 职场文书
最美乡村医生事迹材料
2014/06/02 职场文书
党员四风问题对照检查材料
2014/09/27 职场文书
六一领导慰问欢迎词
2015/01/26 职场文书
会计专业求职信范文
2015/03/19 职场文书
2015年后勤工作总结范文
2015/04/08 职场文书
单位工作证明范本
2015/06/15 职场文书
哪类餐饮行业,最适合在高校创业?
2019/08/19 职场文书
90条交通安全宣传标语
2019/10/12 职场文书
python中的3种定义类方法
2021/11/27 Python
以下牛机,你有几个
2022/04/05 无线电