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. 查看文件内容 cat , tac

    cat  文件名字tac  文件名字  --  倒序查看文件内容

  2. 五、UI开发之核心基础——约束(深入)

    概述 本节我们将较为理论的讲述约束,更准确的说法叫做“AutoLayout”.对于后续章节要学习的内容,本篇文章并非必须,如果你也像我当年一样正在被老板踢屁股赶进度的话,但可掠过本篇. 本篇内容旨在锦 ...

  3. Servlet Analysis

    @WebServlet("/cdiservlet") //url映射 public class NewServlet extends HttpServlet { private M ...

  4. CentOS 7 源码编译vim8+vimplus

    安装依赖包 [root@DaMoWang ~]# yum -y install git \ centos-release-scl \ gcc-c++ \ ncurses-devel \ python- ...

  5. mac系统maven spring mvc小试牛刀

    转: https://blog.csdn.net/Hitourlee/article/details/77930309和https://www.cnblogs.com/xiaowenbo/p/6980 ...

  6. HTML基础教程

    <!DOCTYPE html><html> <head> <title></title> </head> <body> ...

  7. 虚拟机 安装centos

    entOS安装 我是用VMware 12 安装的,下面是安装,打开VM主页 选择创建虚拟机 典型安装:VMwear会将主流的配置应用在虚拟机的操作系统上,对于新手来很友好. 自定义安装:自定义安装可以 ...

  8. 51nod1432贪心

    n个人,已知每个人体重.独木舟承重固定,每只独木舟最多坐两个人,可以坐一个人或者两个人.显然要求总重量不超过独木舟承重,假设每个人体重也不超过独木舟承重,问最少需要几只独木舟? Input 第一行包含 ...

  9. css3 二维码 添加 扫描特效

    <section data-role="paragraph" class="_135editor" style="border: 0px non ...

  10. 搭建一个Web Server站点

    题:搭建一个Web Server站点.安装web服务,并在本地创建index.html测试 1.安装http服务 yum -y install httpd 2.进入网站目录 cd /var/www/h ...