query传参:
this.$router.push({
path:'/...'
query:{
id:id
}
})

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

params传值:

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

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

 this.$router 和this.$route的区别

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

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

vue-router中query和params传参(接收参数)以及$router、$route的区别的更多相关文章

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

    今天做项目时踩到了vue-router传参的坑(query和params),所以决定总结一下二者的区别. 直接总结干货!!! 1.query方式传参和接收参数 传参: this.$router.pus ...

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

    链接:https://segmentfault.com/a/1190000012735168 1.query方式传参和接收参数 传参: this.$router.push({ path:'/xxx' ...

  3. vue router使用query和params传参的使用

    传参是前端经常需要用的一个操作,很多场景都会需要用到上个页面的参数,本文将会详细介绍vue router 是如何进行传参的,以及一些小细节问题.有需要的朋友可以做一下参考,希望可以帮到大家. Vue ...

  4. vue query或params传参

    1.query 传递端: this.$router.push({ path:"/AccountFP", query:{ id:row.id, userId:row.userId } ...

  5. vue 中 this.$router.push() 路由跳转传参 及 参数接收的方法

    传递参数的方法:1.Params 由于动态路由也是传递params的,所以在 this.$router.push() 方法中 path不能和params一起使用,否则params将无效.需要用name ...

  6. vue-router query和params 传参和接收参数

    1.params 方式传递和接收参数 //传参 this.$router.push({ name: 'checkDetailInfo', params:{ fkdNum:fkdNum, jyayStr ...

  7. vue-router中query与params区别

    query和params两者都是在Vue路由中传参. 用法: query用path来引入,params只能用name来传递,不能使用path 展示效果:query更像ajax中get请求(会在地址栏显 ...

  8. Vue 踩坑日志 - 有关路由传参的坑

    1.有关路由传参 vue中当通过params传过去的参数刷新页面以后会消失,所以可以用query传参.但此时又会出现另一个坑,刷新后数据仍在.但这是针对单个的某个变量的. 如果传入一个对象的话,刷新页 ...

  9. vue 通过 name 和 params 进行调整页面传参刷新参数丢失问题&vue路由可选参数

    vue  通过 name 和 params 进行调整页面传参刷新参数丢失问题 router.js: export default new Router({ routes: [ { path: '/', ...

随机推荐

  1. 解决 FATAL ERROR: CALL_AND_RETRY_LAST Allocation failed - JavaScript heap out of memory 问题

    https://blog.csdn.net/weixin_41196185/article/details/81114226 今天在启动vue项目的时候报了这样一个错误 观察到关键词是 FATAL E ...

  2. Java package can not import alias

    you can not do "import x as y;" in Java. What you CAN do is to extend the class, or write ...

  3. 转换编码utf-8

    用这个enca -x utf-8 * 或者是 filename,还有别的方法,参见:https://blog.csdn.net/a280606790/article/details/8504133 我 ...

  4. vue和jQuery嵌套实现异步ajax通信

    <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8&qu ...

  5. 彻底解决(Microsoft Visual C++ 14.0 is required)的步骤123

    之前要用协程gevent,安装pip install gevent包时遇到Microsoft Visual C++ 14.0 is required的报错提示,各种下载没有解决很头疼, 前两天安装sc ...

  6. 213. House Robber II(动态规划)

    You are a professional robber planning to rob houses along a street. Each house has a certain amount ...

  7. ASP.net MVC5 Code First填充测试数据到数据库

    问题的产生  最近在看Adam Freeman的“Pro ASP.NET MVC5”,于是在工作机上面搭建了相应的运行环境,但是在自己的机器上面只有代码,没有数据库.记得在code first中可以新 ...

  8. rsync 守护进程备份报错

    [root@nfs01 backup]# rsync -avz  /backup rsync_backup@172.16.1.41::backupPassword: @ERROR: auth fail ...

  9. react和vue,angular的比较

    就这几天我所了解到react情况和大家探讨一下子react的知识: react由facebook团队维护的一套框架,已经应用在instagram网站上了,react以其独特的性能优化方案,正在被越来越 ...

  10. CentOS 6.5系统中安装配置MySQL数据库

    就像Windows server 2003,2008中一般安装的是Sql Server 数据库,在linux系统中一般安装的是mysql数据库,而且Mysql数据库的第一个版本就是发行在Linux系统 ...