vue Router传值 params和query区别

最新推荐文章于 2022-08-23 16:02:39 发布
最新推荐文章于 2022-08-23 16:02:39 发布
阅读量184 收藏
点赞数
分类专栏： 前端学习 Vue.js学习 文章标签： vue-router
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41251187/article/details/109739864
版权

这里写自定义目录标题

vue-router传值

params

this.$router.push({name:'edit',params:{id:row.id}});

接收

this.$route.params.id

query

this.$router.push({path:'/match/edit',query:{id:row.id}});

接收

this.$route.query.id

params和query传值的区别

使用params传值 刷新后值不会保留
使用query传值 刷新后值依然存在
所以 当然是用query啊!!

M-Didid
关注
专栏目录
Vue router的传值，params和query的区别
NI_computer的博客
10-09 265
在Vue router中可以使用params和query来传递值。相当于get和post的区别。query相当于get请求，传递的值会放在地址栏中展示，而params相当于post请求，传递的值不会显示在地址栏中。 其中，query传值的方法路由可以没有名字，但是params传值必须要有名字。 <div id="app"> <h1>点击链接跳转界面</h1> <router-link :to="student">跳转到学生&l
ElementUI实现表格增删改查
zy158982045727的博客
05-25 755
<template> <div style="padding: 20px"> <!-- <el-header>Header</el-header> --> <div> <main class="h-full pb-16 overflow-y-auto"> <div class="container grid px-6 mx-auto"> ...
【vue】跨路由传值，params和query有什么区别？
阿杰
09-30 354
如何通过路由传值，params和query又有什么区别？ 正文 vue跨路由传值有两种方式：params和query 第一种,name params 传值页js代码 //把项目id存进路由 vm.$router.push({ name: "MyJionDetail", params: { id: vm.proid,//冒号前面的变量...
10.vue router 带参数跳转
dilinying2838的博客
01-21 138
vue router 带参数跳转 发送：this.$router.push({path:'/news',query:{id:row.id}}) 接收：var id=this.$route.query.id 返回上一步：this.$router.go(-1) 转载于:https://www.cnblogs.com/TimerHotel/p/vue_10.html...
【VUE】页面A点击后携带参数跳转到页面B并搜索
SZnAl的博客
08-11 1667
页面A点击后获取搜索参数，如 ID、Num等，跳转到B页面，使用A页面携带过来的参数在B页面进行搜索。
vue router使用query和params传参的使用和区别
08-28
本篇文章主要介绍了vue router使用query和params传参的使用和区别，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
浅析vue-router中params和query的区别
01-19
query要用path来引入 this.$router.push({ path: 'test', query: { type: 2, detail: '哈哈' } }) params要用name来引入 this.$router.push({ name: 'test', query: { type: 2, detail: '哈哈' } }) 2....
vue路由传值params，query之踩坑系列
小菜鸟的博客
04-22 614
vue路由传值params，query之踩坑系列 vue路由传值 this.$router.push({name:xx,params:{id:xx}}),或者另外一种写法 <router-link :to='{name:"home",params:{id:2}}' tag="li">首页</router-link> 这两种在某种意义上是一样的效果适合get之外的请求，也就是不在地址栏带参数 在这里一定要注意，to前面一定要加冒号：,不然跳过去的就是空白的页面上显示不了，name
Vue中页面跳转路由传参
Jeniclala的博客
04-21 181
很多情况下，我们在执行点击按钮跳转页面之前还会执行一系列方法，这时可以使用 this.$router.push(location) 来修改 url，完成跳转。 push 后面可以是对象，也可以是字符串： // 字符串 this.$router.push('/home/first') // 对象 query相当与发送了一次get请求，请求参数会显示在浏览器地址栏中 this.$router.push({ path: '/home/first' }) // 命名的路由 params相当与发送了一次post
Vue Router 的params和query传参的使用和区别（详尽）
热门推荐
mf_717714的博客
08-22 17万+
首先简单来说明一下$router和$route的区别 //$router : 是路由操作对象，只写对象 //$route : 路由信息对象，只读对象 //操作 路由跳转 this.$router.push({ name:'hello', params:{ name:'word', age:'11' } }) //读取 ...
vue query或params传参
weixin_30877227的博客
07-31 123
1.query 　　传递端： 　　this.$router.push({ 　　　　path:"/AccountFP"， 　　　　query:{ 　　　　　　id:row.id, 　　　　　　userId:row.userId 　　　　} 　　}) 　　接受端： 　　console.log(this.$route.query,id) 　　console.log(this.$r...
vue element ui跳转页获取跳转前页面列表里的行id
wjsn520的博客
05-08 1149
后台管理系统经常要用到列表，在列表的每一行经常需要做编辑操作，自己做项目的时候，编辑页用了一个新的隐藏页，通过路由加载，隐藏页需要获取前一页当前行的id，可通过this.$route.query.id来获取： 跳转前页面HTML <el-table-column fixed="right" label="选择商品" width="100"> <template scope="scope"> <el-button size="small" type="warning"
vue路由跳转时传参params和query的区别
唐立彤的博客
12-12 2573
1.params传参，用name属性对应跳转路径，类似于post提交，参数不会出现在跳转路径里。 &lt;router-link :to="{ name:'cityList' ,params :{cityId:scope.row.id} }"&gt;     &lt;el-button size="mini"  class="button1"&gt;{{$t('m.cityList')}}({{...
vue路由跳转传参
我行我素的博客
08-23 242
vue路由跳转方式
vue项目中 全局数据的使用
m-dididid的博客
11-29 2094
用vue写项目一般都会用到组件，而组件一般是独立的，组件自身需要的数据都写在组件自身内部，而当我们需要组件之间共享数据时，就需要全局数据了。 首先，建立一个js文件globalData.js 将需要共享的数据写在这个js文件中并 export const mapdata=[] const provinceName='' const t='' const tt='' ...
warning no match for this type name
北堂飘霜_记录
11-26 2879
场景 启动项目时报错 warning no match for this type name 解决 切面表达式错误 找到对应的切面表达式改一改即可 @PointCut("execution(* com.xxx.xxx.dao..*.*(..))")
VUE 中 props 得默认值用法
qq_38935512的博客
07-25 2万+
props 是VUE中子组件能获得父组件值得唯一通道 通常得用法： 父组件： <s-button :h="list"></s-buttong> 子组件： props：["h"]============================console.log(this.h) 今天在封装组件库得时候发现 props可以给传进来得值进行默认值设置，以及他得类型，上代...
vue中this.$router.push路由2种传参以及获取方法
太阳晒屁股了的博客
08-07 7768
vue中this.$router.push路由2种传参以及获取方法 项目中通过this.$router.push路由跳转页面传递参数的方式很常见，一般有两种方式： 1.params传参： this.$router.push({name:'parasetEdit',params:{pk_refinfo:'test',value:'test1'}}); 目标页面接收参数： this.$rou...
vue+element-ui 自定义表单校验（用户名、密码）
m-dididid的博客
08-06 1万+
vue密码、手机号、用户名输入验证1、表单中设置prop ref 和 :rules（详情见element-ui官网）用来设置验证规则,如下：2、在data中写下具体规则，element-ui中的功能不太齐全，需要自定义，我们主要看怎么去实现自定义规则，先上rule代码代码中的validator: validUsername、validator: validatePass都是属于自定义的规则，va...
vue router中params和query传参的区别
最新发布
04-20
params和query都是在路由跳转时传递参数的方式，但是它们的传递方式不同。params参数是直接绑定在路由路径上，形式是 /path/:paramName，query参数则是通过 ?key=value 的形式添加在路由地址后面。 对于params参数...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值