1.路由传值   this.$router.push()

(1) 路由跳转使用router.push()方法,这个方法会向history栈添加一个新纪录,所以,当用户点击浏览器后退按钮时,会回到之前的页面。

a. 路由跳转:

this.$router.push('/home');

b. 命名的路由,传参使用params:

this.$router.push({name:"home", params:{userId: '123'}})

        获取参数

this.$router.params.userId

  c. 带查询的参数, 传参使用query:

this.$router.push({ path: "/mine", query: { userId: "123" } });

       获取参数

this$router.query.userId

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

            (2)两种方式的区别是query传参的参数会带在url后边展示在地址栏,params传参的参数不会展示到地址栏。需要注意的是接收参数的时候是route而不是                           router。两种方式一一对应,名字不能混用

  

vue中this.$router.push()路由传值和获取的两种常见方法的更多相关文章

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

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

  2. Vue中this.$router.push(参数) 实现页面跳转

    很多情况下,我们在执行点击按钮跳转页面之前还会执行一系列方法,这时可以使用 this.$router.push(location) 来修改 url,完成跳转. push 后面可以是对象,也可以是字符串 ...

  3. Vue中this.$router.push参数获取(通过路由传参)【路由跳转的方法】

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

  4. Vue中this.$router.push参数获取

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

  5. vue中this.$router.push() 传参

    1  params 传参 注意⚠️:patams传参 ,路径不能使用path 只能使用name,不然获取不到传的数据 this.$router.push({name: 'dispatch', para ...

  6. 路由传值及获取参数,路由跳转,路由检测,this.$route.query和this.$route.params接收参数,HttpGet请求拼接url参数

    配置动态路由参数id: routes: [ // 动态路径参数 以冒号开头 { path: '/user/:id', component: User } ] html路由跳转: <router- ...

  7. 【面试题】Vue中的$router 和 $route的区别

    Vue中的$router 和 $route的区别 点击视频讲解更加详细 this.$route:当前激活的路由的信息对象.每个对象都是局部的,可以获取当前路由的 path, name, params, ...

  8. Vue中使用children实现路由的嵌套

    Vue中使用children实现路由的嵌套 相关Html: <!DOCTYPE html> <html lang="en"> <head> &l ...

  9. vue中如何不通过路由直接获取url中的参数

    前言:为什么要不通过路由直接获取url中的参数? vue中使用路由的方式设置url参数,但是这种方式必须要在路径中附带参数,而且这个参数是需要在vue的路由中提前设置好的. 相对来说,在某些情况下直接 ...

随机推荐

  1. SprignBoot是如何访问工程目录下的静态资源?

    ​ 目录 1.牛刀小试 1.1 图片静态资源的访问 1.2 为静态资源添加访问前缀 1.3  WelCome Page 的奇妙跳转 2.那么,SpringBoot是如何做到的呢? ​​​​​​​ 1. ...

  2. 遇到禁止复制该怎么办?幸好我会Python...

    相信大家都有遇到这种情况(无法复制): 或者是这种情况 以上这种情况都是网页无法复制文本的情况.不过这些对于Python来说都不是问题.今天辰哥就叫你们用Python去解决. 思路:利用pdfkit库 ...

  3. mysql的优化_第十一篇(查询计划篇)

    Mysql优化(出自官方文档) - 第十一篇(查询计划篇) 目录 Mysql优化(出自官方文档) - 第十一篇(查询计划篇) 1 EXPLAIN Output Format EXPLAIN Join ...

  4. Android系统编程入门系列之清单文件

    在上一篇文章中已经提到,Android系统加载应用程序之后,首先会读取该应用程序的AndroidManifest.xml清单文件,之后根据该清单文件加载后边的东西.所以要开发应用程序,自然要先知道清单 ...

  5. ASW 工作流最佳实践(二):使用 ASW 并发调用函数

    在音视频转码.ETL 作业处理.基因数据处理等诸多场景中,我们都可以通过工作流并行调用云函数,将任务进行并行处理,大大提高任务处理的吞吐量,满足应用场景的高实时性.高并发能力. 在<使用 ASW ...

  6. js笔记12

    1.元素的属性 div.attributes是所有标签属性构成的数组集合 div.classList是所有class名构成的数组集合 在classList的原型链上可以看到add()和remove() ...

  7. vim安装及个性化配置

    1.安装vim,并且vim命令的别名设置为vi yum install vim -y (如果不能识别vim命令,需要先安装vim) vi /etc/bashrc 或者 vi ~/.bashrc 在最后 ...

  8. BFS经典面试题——C++版

    文章目录 蛇梯棋 单词接龙 青蛙过河 蛇梯棋 N x N 的棋盘 board 上,按从 1 到 N*N 的数字给方格编号,编号 从左下角开始,每一行交替方向. 例如,一块 6 x 6 大小的棋盘,编号 ...

  9. 05 找出占用CPU、内存过高的进程

    #!/bin/bash export PATH=/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/root/bin echo "----- ...

  10. 无向图(邻接表实现)DFS_AND_BFS

    数据结构选择TreeSet的原因:通过自定义的Compare方法,保证了点元素的唯一性,有序性(方便检验): 传入Set和Map中的元素类似于C中的指针操作,即共享地址,改变其中一个中的元素,与之相关 ...