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. python中的装包与拆包

    python中的装包与拆包 *args和 **kwargs是在python的代码中经常用到的两个参数,初学者对这两个参数的理解可能仅仅限于*args是用于接收多余的未命名参数,**kwargs用于接收 ...

  2. Apache环境下配置多个站点的SSL证书

    重新创建apache目录中conf/extra/下的httpd-ssl.conf文件 NameVirtualHost *:443 Listen 443 <VirtualHost *:443> ...

  3. 家庭记账本之微信小程序(六)

    Wxss的学习 WXSS(WeiXin Style Sheets)是一套样式语言,用于描述WXML的组件样式. WXSS用来决定WXML的组件应该怎么显示. 为了适应广大的前端开发者,我们的WXSS具 ...

  4. fiddler学习总结--autoresponder替换资源

    意义:替换服务器返回的内容 1.找到需要替换的目标 2.选择目标后,点击“autoresponder”-->”add  rules” 3.在下图中,选择“find a file”,再选择需要替换 ...

  5. 把vim插入状态的光标改为竖线

    和终端有关系,如果是Konsole的终端,把下面两行加到.vimrc文件里就可以 let &t_SI = "\<Esc>]50;CursorShape=1\x7" ...

  6. Feign 与 Hystrix

    Feign 与 Hystrix Feign是一个声明式的web服务客户端,它使得web服务调用非常的简单,当我们使用Feign时,Spring Cloud 整合了Ribbon和Eureka,从而为我们 ...

  7. 剑指offer(60)把二叉树打印成多行

    题目描述 从上到下按层打印二叉树,同一层结点从左至右输出.每一层输出一行. 题目分析 从上到下打印二叉树我们知道用队列可以实现,但是如果多行打印怎么做呢? 我们需要分割,在行与行之间进行分割.如何分割 ...

  8. VC++ 实现INI文件读写操作

    转载:https://blog.csdn.net/fan380485838/article/details/73188420 在实际项目开发中,会用ini配置文件,在此总结一下对ini读写操作 一:读 ...

  9. gcc、make编译

    一 arm-linux-gcc 常用参数 https://www.cnblogs.com/zhangpengshou/p/3587751.html 二 arm-linux-objdump常用参数 ht ...

  10. python之路——模块和包

    阅读目录 一 模块 3.1 import 3.2 from ... import... 3.3 把模块当做脚本执行 3.4 模块搜索路径 3.5 编译python文件 二 包 2.2 import 2 ...