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 相关文章推荐
JS正则验证邮箱的格式详细介绍
Nov 19 Javascript
详解Javascript事件驱动编程
Jan 03 Javascript
jquery获取复选框checkbox的值实现方法
May 30 Javascript
vue2.0开发实践总结之入门篇
Dec 06 Javascript
浅析jQuery操作select控件的取值和设值
Dec 07 Javascript
JS区分Object与Aarry的六种方法总结
Feb 27 Javascript
浅谈Node.js ORM框架Sequlize之表间关系
Jul 24 Javascript
详解一个基于react+webpack的多页面应用配置
Jan 21 Javascript
layui prompt 设置允许空白提交的方法
Sep 24 Javascript
webpack DllPlugin xxx is not defined解决办法
Dec 13 Javascript
vue用elementui写form表单时,在label里添加空格操作
Aug 13 Javascript
Vue看了就会的8个小技巧
Jan 21 Vue.js
你不知道的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
记录mysql性能查询过程的使用方法
2013/05/02 PHP
隐性调用php程序的方法
2015/06/13 PHP
Yii中实现处理前后台登录的新方法
2015/12/28 PHP
php自动加载方式集合
2016/04/04 PHP
PHP判断json格式是否正确的实现代码
2017/09/20 PHP
jQuery-onload让第一次页面加载时图片是淡入方式显示
2012/05/23 Javascript
最短的IE判断var ie=!-[1,]分析
2014/05/28 Javascript
extjs 时间范围选择自动判断的实现代码
2014/06/24 Javascript
js的for in循环和java里foreach循环的区别分析
2015/01/28 Javascript
js带缩略图的图片轮播效果代码分享
2015/09/14 Javascript
jQuery实现div横向拖拽排序的简单实例
2016/07/13 Javascript
JavaScript中this的用法实例分析
2016/12/19 Javascript
JQ中$(window).load和$(document).ready区别与执行顺序
2017/03/01 Javascript
微信小程序上滑加载下拉刷新(onscrollLower)分批加载数据(二)
2017/05/11 Javascript
js微信分享接口调用详解
2019/07/23 Javascript
javascript 模块依赖管理的本质深入详解
2020/04/30 Javascript
jQuery 动画与停止动画效果实例详解
2020/05/19 jQuery
js实现随机点名
2021/01/19 Javascript
Vue包大小优化的实现(从1.72M到94K)
2021/02/18 Vue.js
Eclipse + Python 的安装与配置流程
2013/03/05 Python
python将文本转换成图片输出的方法
2015/04/28 Python
Python实现抢购IPhone手机
2018/02/07 Python
python和opencv实现抠图
2018/07/18 Python
python保存网页图片到本地的方法
2018/07/24 Python
利用python画出折线图
2018/07/26 Python
在linux系统下安装python librtmp包的实现方法
2019/07/22 Python
Python 利用邮件系统完成远程控制电脑的实现(关机、重启等)
2019/11/19 Python
SmartBuyGlasses丹麦:网上购买名牌太阳镜、眼镜和隐形眼镜
2016/10/01 全球购物
澳大利亚礼品篮网站:Macarthur Baskets
2019/10/14 全球购物
全球精选男装和家居用品:Article
2020/04/13 全球购物
领先的荷兰线上超市:荷兰之家Holland at Home(支持中文)
2021/01/21 全球购物
幼儿园教研活动方案
2014/01/19 职场文书
MBA推荐信怎么写
2015/03/25 职场文书
2015年机关党建工作总结
2015/05/22 职场文书
Java如何实现树的同构?
2021/06/22 Java/Android
使用Java去实现超市会员管理系统
2022/03/18 Java/Android