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 相关文章推荐
JavaScript中yield实用简洁实现方式
Jun 12 Javascript
file控件选择上传文件确定后触发的js事件是哪个
Mar 17 Javascript
javascript圆盘抽奖程序实现原理和完整代码例子
Jun 03 Javascript
Javascript判断文件是否存在(客户端/服务器端)
Sep 16 Javascript
浅谈javascript中call()、apply()、bind()的用法
Apr 20 Javascript
JavaScript数组对象实现增加一个返回随机元素的方法
Jul 27 Javascript
举例讲解jQuery中可见性过滤选择器的使用
Apr 18 Javascript
js获取鼠标点击的对象,点击另一个按钮删除该对象的实现代码
May 13 Javascript
JavaScript实现图片轮播组件代码示例
Nov 22 Javascript
JS实现页面中所有img对象添加onclick事件及新窗口查看图片的方法
Dec 27 Javascript
Webpack打包慢问题的完美解决方法
Mar 16 Javascript
JavaScript 点击触发复制功能实例详解
Nov 02 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
微信支付开发维权通知实例
2016/07/12 PHP
PHP中类型转换 ,常量,系统常量,魔术常量的详解
2017/10/26 PHP
PHP实现的curl批量请求操作示例
2018/06/06 PHP
一些常用的JS功能函数代码
2009/06/23 Javascript
jQuery each()小议
2010/03/18 Javascript
node.js chat程序如何实现Ajax long-polling长链接刷新模式
2012/03/13 Javascript
得到jQuery detach()后节点中的某个值实现代码
2013/02/05 Javascript
原生js编写设为首页兼容ie、火狐和谷歌
2014/06/05 Javascript
JQuery实现表格动态增加行并对新行添加事件
2014/07/30 Javascript
js实现点击链接后延迟3秒再跳转的方法
2015/06/05 Javascript
AngularJS学习笔记之ng-options指令
2015/06/16 Javascript
JavaScript的jQuery库插件的简要开发指南
2015/08/12 Javascript
jQuery实现标题有打字效果的焦点图代码
2015/11/16 Javascript
jQuery插件 Jqplot图表实例
2016/06/18 Javascript
微信小程序 swiper组件轮播图详解及实例
2016/11/16 Javascript
JS搜狐面试题分析
2016/12/16 Javascript
laydate.js日期时间选择插件
2017/01/04 Javascript
详解vue组件通信的三种方式
2017/06/30 Javascript
微信小程序媒体组件详解(视频,音乐,图片)
2017/09/19 Javascript
详解微信小程序调起键盘性能优化
2018/07/24 Javascript
LayerClose弹窗关闭刷新方法
2018/08/17 Javascript
NodeJS 将文件夹按照存放路径变成一个对应的JSON的方法
2018/10/17 NodeJs
Vue使用Element实现增删改查+打包的步骤
2020/11/25 Vue.js
Python中为feedparser设置超时时间避免堵塞
2014/09/28 Python
深入理解Python中的super()方法
2017/11/20 Python
Python爬虫爬取一个网页上的图片地址实例代码
2018/01/16 Python
对Python中9种生成新对象的方法总结
2018/05/23 Python
python中csv文件的若干读写方法小结
2018/07/04 Python
django 多数据库及分库实现方式
2020/04/01 Python
Python实现列表中非负数保留,负数转化为指定的数值方式
2020/06/04 Python
python正则表达式re.match()匹配多个字符方法的实现
2021/01/27 Python
html5 Canvas画图教程(2)—画直线与设置线条的样式如颜色/端点/交汇点
2013/01/09 HTML / CSS
在canvas上实现元素图片镜像翻转动画效果的方法
2018/03/20 HTML / CSS
Lee牛仔裤澳大利亚官网:美国著名牛仔裤品牌
2017/09/02 全球购物
帕克纽约:PARKER NY
2018/12/09 全球购物
后进生转化工作制度
2014/01/17 职场文书