vue-router query和params传参(接收参数),$router、$route的区别

1.query方式传参和接收参数

查询字符串传参

 

 2.params方式传参和接收参数 

 

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

params传参

  ?key=value =》  用$route.query.key 取值

  /值-需要提前在路由规则/path/:key =》  用$route.params.key  取值

       另外,二者还有点区别,直白的来说query相当于get请求,页面跳转的时候,可以在地址栏看到请求参数,而params相当于post请求,参数不会再地址栏中显示

注意:传参是this.$router,接收参数是this.$route,这里千万要看清了!!!

3. this.$router 和this.$route有何区别?

在控制台打印两者可以很明显的看出两者的一些区别:

 

     1)$router为VueRouter实例,想要导航到不同URL,则使用$router.push方法

     2)$route为当前router跳转对象,里面可以获取name、path、query、params等

 4.this.$router.push() 的用法

    1)作用:this.$router.push() 可以通过修改url实现路由跳转。

    2)push 后面可以是对象,也可以是字符串:

       由于动态路由也是传递params的,所以在 this.$router.push() 方法中path不能和params一起使用,否则params将无效。需要用name来指定页面。及通过路由配置的name属性访问.

在路由配置文件中定义参数:

通过name获取页面,传递params:

在目标页面通过this.$route.params获取参数:
{
path: ‘/login/:myid’, // 动态路由
name: ‘home’, // 命名路由
component: Login
},
 

Amy--成长ing
关注 关注
  • 4
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
queryparams 传参和接参
weixin_54757930的博客
10-28 844
1. params 方式传递和接收参数 this.$router.push({ name: 'checkDetailInfo', params:{ fkdNum:fkdNum, jyayStr:jyayStr } }); this.toplistInfo = this.$route.params;//接收 //this.$router.push({ //path: `/mall_shopping/OrderDetails/${r
vue-router params无法传参的问题(路由传参
h919685908的博客
09-09 3298
路由传参方式导致传参失败
vue-router动态传参($route.params、$route.query
muzidigbig的博客
11-02 3336
一、动态路径参数 以冒号开头(这种传参的方式会将传的值暴露在地址栏中;$route.params进行接收) 当to后面跟的是其他拼凑出来的值需要让to变为属性的方式传参 即 :to =' ' 效果: 二、get的方式进行传参(这种传参的方式相当于在地址栏?参数=值;$route.query进行接收) 效果: ...
queryparams区别是什么
最新发布
weixin_63490373的博客
07-08 1151
URL 结构params参数作为路径的一部分。query参数作为查询字符串的一部分。获取参数的方法params:通过。query:通过。使用场景如果参数是资源的标识符并且应该是路径的一部分,使用params。如果参数是可选的或用于过滤、排序等,使用query。根据具体需求选择合适的方式。
路由,vue-router的基本用法,vue-router的常见用法$route.params、$router.push、$router.replace、$router.go
m0_47794838的博客
02-01 3386
路由,vue-router的基本用法,vue-router的常见用法$route.params、$router.push、$router.replace、$router.go
$routeParams传递路由参数
weixin_34315189的博客
03-30 293
$routeParams传的值是一个对象数组。 案例: index.html 1 <!DOCTYPE html> 2 <html lang="zh-cn" data-ng-app="myApp"> 3 <!--myApp这里要和module模型里的名称一样--> 4 <head> 5 <meta char...
浅析vue-router jqueryparams传参(接收参数)$router $route的区别
10-18
本文通过对比和实例,详细解析了在Vue-Router中使用`$router`和`$route`对象在参数传递和接收方面的主要区别。了解这些细节有助于我们更好地管理应用的路由和数据传递。希望本文的内容能够帮助到在Vue.js项目中遇到...
vue router使用queryparams传参的使用和区别
11-26
传参前端经常需要用的一个操作,很多场景都会需要用到上个页面的参数,本文将会详细介绍vue router 是如何进行传参的,以及一些小细节问题。有需要的朋友可以做一下参考,喜欢的可以点波赞,或者关注一下,希望...
详解vue-router传参的两种方式
01-19
Vue RouterVue.js 官方的路由管理器。它和 Vue.js 的核心深度集成,让构建单页面应用变得易如反掌。...vue-router传参两种方式:paramsquery paramsquery是什么?  params:/router1/:id ,/router1/1
vue之this.$route.query和this.$route.params接收参数
Teheran的博客
01-22 4768
A页面传递参数peng=0 registerInfoThis.$router.push(&amp;quot;/hrhi/psninfo/dynamic/&amp;quot; + data.row.pk_psndoc + '?funcode=60070psninfo&amp;amp;amp;peng=0'); 运行后,传递的参数在地址栏中有显示 B页面接收参数 created() { this.penga = this.$route....
vue router传参接受参数方式
曾令胜的博客
10-18 6427
vue传参方法一 1,路由配置 { path: ‘/describe/:id’, name: ‘Describe’, component: Describe } 2,使用方法 // 直接调用$router.push 实现携带参数的跳转 this.$router.push({ // 这个id是一个变量,随便是什么值都可以 path: /describe/${id}`, }) 3,获取方法(在describe页面) $route.params.id 使用以上方法可以拿到上个页面传过来的id
angular -- $routeParams API翻译
07-16 127
原api出处: https://docs.angularjs.org/api/ngRoute/service/$routeParams $routeParams 可以获取当前路径参数. 需要ngroute模块被安装。 路径参数是$location.search()和$location.path()的组合. 当$route被匹配的时候,路径参数就会被获取. 在参数名称冲突的情况下...
vue-routerqueryparams
Angela
02-22 3740
vue传参有两种方式:标签式和编程式 编程式传参queryparams两种,下面说说这两种方式如何实现传递参数,以及如何接收参数。 目录 1.query传参 2.params传参 1.query传参 //js路由文件路由写法  {path:"recipe",component:Recipe},//用query传参不需要参数:rname //a.vue文件传递参数rname ...
vue中路由的使用-通过this.$route.params来获取路由中的参数
热门推荐
u011608672的博客
03-04 1万+
什么是路由 对于普通的网站,所有的超链接都是URL地址,所有的URL地址都对应服务器上对应的资源; 对于单页面应用程序来说,主要通过URL中的hash(#号)来实现不同页面之间的切换,同时,hash有一个特点:HTTP请求中不会包含hash相关的内容;所以,单页面程序中的页面跳转主要用hash实现; 在单页面应用程序中,这种通过hash改变来切换页面的方式,称作前端路由(区别于后端路由); 在 vue 中使用 vue-router 导入 vue-router 组件类库: 使用 router
this.$router路由paramsquery传参
前端小菜鸟的成长记录
10-13 2404
路由跳转传参
vue $router传参 json_vue-routerparams传参query传参区别及处理方法
weixin_36350067的博客
02-03 1048
Vue 实例内部,你可以通过 $router 访问路由实例。因此你可以调用 this.$router.push想要导航到不同的 URL,则使用 router.push 方法。这个方法会向 history 栈添加一个新的记录,所以,当用户点击浏览器后退按钮时,则回到之前的 URL。这里我们主要采用对象跳转形式。要跳转页面的path属性值:router.push({ path: 'my-excha...
Vue之this.$route.query和this.$route.params的使用与区别
wwyxjjz的博客
08-19 4236
项目中遇到禁止url带参数,于是整理一下常用的两种传参方式的区别吧 一、this.$route.query的使用 1.传参数 this.$router.push({ path: '/trading', query:{ id:id, } }) 2.获取参数(query相对应的是pathparams相对应的......
Vue Routerparamsquery传参的使用和区别
qq_26642611的博客
12-25 657
首先简单来说明一下routerrouterrouter和route的区别 //$router : 是路由操作对象,只写对象 //$route : 路由信息对象,只读对象 //操作 路由跳转 this.$router.push({ name:'hello', params:{ name:'word', age:'11' ...
请举例vue-router中的params传参query传参
04-01
1. params传参: 在路由配置中定义路由参数,例如: ``` const routes = [ { path: '/user/:id', component: User } ] ``` 在组件中通过$route对象获取路由参数,例如: ``` <h2>User {{ $route.params....
写文章

热门文章

  • 什么是跨域?跨域解决方法 91358
  • Vue中的过滤器(filter) 60017
  • 什么是防抖和节流?有什么区别?如何实现? 38436
  • 插槽(slot)的基本使用 15222
  • element-ui的表单正则校验 14687

分类专栏

  • Vue中 this.$set的用法 1篇
  • Vue3常用的组合Api 1篇
  • 什么是v-model语法糖 1篇
  • 函数this三种指向 1篇
  • 深拷贝浅拷贝的区别?如何实现一个深拷贝? 1篇
  • element-ui的表单正则校验 1篇
  • Vue中的过滤器(filter) 1篇
  • 基于 vue-cli 初始化 Vue2 模板的项目 1篇
  • vue中v-model详解 1篇
  • vuex(核心管理模式二) 1篇
  • vue路由传参的方式 1篇
  • vue生命周期-小白都能看懂!! 1篇
  • 数组、函数、对象简单知识点回顾

最新评论

  • 插槽(slot)的基本使用

    Soirs: 你好 最后面的总结是有删减吗?

  • 什么是跨域?跨域解决方法

    一只莽夫: 点赞收藏支持一下,文章写得很好,初来乍到,希望多多关注,期待你的回复

  • Vue中的过滤器(filter)

    美酒没故事°: 封装好了 https://www.npmjs.com/package/code-transfor-text_vue 用于这个那个项目的字典码转汉字挺合适

  • 什么是防抖和节流?有什么区别?如何实现?

    ~东北大呲花 ~: 防抖你们没感觉写错了吗?

  • 什么是跨域?跨域解决方法

    m0_56285765: 很清晰,可以再加上nginx代理就更完整了

最新文章

  • Vue中 this.$set的用法
  • Vue3常用的组合Api
  • 什么是v-model语法糖
2022年30篇

目录

目录

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值

玻璃钢生产厂家石家庄公园玻璃钢雕塑生产厂家邯郸水景玻璃钢卡通雕塑厂家佛山市名图玻璃钢雕塑工程东川区玻璃钢雕塑福建玻璃钢海豚雕塑丽水校园玻璃钢雕塑贵州步行街玻璃钢雕塑价位大型商场入口美陈南通玻璃钢雕塑厂晋城公园水景玻璃钢景观雕塑玻璃钢园林雕塑定做厂家河南水果玻璃钢雕塑图片长春玻璃钢南瓜屋雕塑玻璃钢雕塑石制作成都卡通雕塑玻璃钢定做玻璃钢户外雕塑安宁市玻璃钢雕塑收费大型玻璃钢雕塑玻璃钢花盆为什么那么浅三明玻璃钢丹顶鹤雕塑萍乡玻璃钢商场美陈北京玻璃钢雕塑批发清远景观玻璃钢雕塑公司河南复合材料玻璃钢花盆加工玻璃钢雕塑敦煌玻璃钢座椅雕塑长治玻璃钢广场雕塑厂家玻璃钢番茄雕塑福州企业玻璃钢雕塑制作天津特色玻璃钢雕塑制作香港通过《维护国家安全条例》两大学生合买彩票中奖一人不认账让美丽中国“从细节出发”19岁小伙救下5人后溺亡 多方发声单亲妈妈陷入热恋 14岁儿子报警汪小菲曝离婚始末遭遇山火的松茸之乡雅江山火三名扑火人员牺牲系谣言何赛飞追着代拍打萧美琴窜访捷克 外交部回应卫健委通报少年有偿捐血浆16次猝死手机成瘾是影响睡眠质量重要因素高校汽车撞人致3死16伤 司机系学生315晚会后胖东来又人满为患了小米汽车超级工厂正式揭幕中国拥有亿元资产的家庭达13.3万户周杰伦一审败诉网易男孩8年未见母亲被告知被遗忘许家印被限制高消费饲养员用铁锨驱打大熊猫被辞退男子被猫抓伤后确诊“猫抓病”特朗普无法缴纳4.54亿美元罚金倪萍分享减重40斤方法联合利华开始重组张家界的山上“长”满了韩国人?张立群任西安交通大学校长杨倩无缘巴黎奥运“重生之我在北大当嫡校长”黑马情侣提车了专访95后高颜值猪保姆考生莫言也上北大硕士复试名单了网友洛杉矶偶遇贾玲专家建议不必谈骨泥色变沉迷短剧的人就像掉进了杀猪盘奥巴马现身唐宁街 黑色着装引猜测七年后宇文玥被薅头发捞上岸事业单位女子向同事水杯投不明物质凯特王妃现身!外出购物视频曝光河南驻马店通报西平中学跳楼事件王树国卸任西安交大校长 师生送别恒大被罚41.75亿到底怎么缴男子被流浪猫绊倒 投喂者赔24万房客欠租失踪 房东直发愁西双版纳热带植物园回应蜉蝣大爆发钱人豪晒法院裁定实锤抄袭外国人感慨凌晨的中国很安全胖东来员工每周单休无小长假白宫:哈马斯三号人物被杀测试车高速逃费 小米:已补缴老人退休金被冒领16年 金额超20万

玻璃钢生产厂家 XML地图 TXT地图 虚拟主机 SEO 网站制作 网站优化