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. 再试Hibernate框架

    几个月前因为学习需要第一次接触了Hibernate(之前一直在用MyBatis),后来觉得有点难,也急着找工作,所以就没继续学下去了.但是找工作的时候发现Hibernate的需求更高,使用率更高,所以 ...

  2. 『无为则无心』Python基础 — 7、Python的变量

    目录 1.变量的定义 2.Python变量说明 3.Python中定义变量 (1)定义语法 (2)标识符定义规则 (3)内置关键字 (4)标识符命名习惯 4.使用变量 1.变量的定义 程序中,数据都是 ...

  3. 基于Ubuntu下以Docker方式gitlab软件的部署

    基于Ubuntu下以Docker方式gitlab软件的部署 目录 基于Ubuntu下以Docker方式gitlab软件的部署 1.安装Docker Compose 1.1 下载curl 1.2 安装c ...

  4. 全面解析Pytorch框架下模型存储,加载以及冻结

    最近在做试验中遇到了一些深度网络模型加载以及存储的问题,因此整理了一份比较全面的在 PyTorch 框架下有关模型的问题.首先咱们先定义一个网络来进行后续的分析: 1.本文通用的网络模型 import ...

  5. 用jquery通过点击事件把下拉列表币种的值传给文本框1,再通过文本框1的币种名称用if转化为币别传值给文本框2保存

    <script src="https://cdn.staticfile.org/jquery/2.2.4/jquery.min.js"></script>& ...

  6. AIDL —— Android接口定义语言

    AIDL:Android Interface Definition Language,即Android接口定义语言,是Android进程间通信比较常用的一种方式.翻译一下,就是为了让某个Service ...

  7. Centos 8 上定时备份Gitlab ,脚本实现定时备份,备份恢复

    定时备份 要求 为了能够备份和恢复,请确保你的系统上安装了Rsync yum install rsync -y 配置备份目标机器免密认证 执行ssh-keygen -t rsa 生成私钥和公钥 ssh ...

  8. Https:创建部署SSL证书进行双向认证

    一.前言 建立客户端与服务器的Https的连接需要证书进行双向验证后,才可访问.   二.证书类型 不同数字证书部署在服务器上后,用户浏览器访问网站时,展示如下: 1.无证书时 显示不安全标识. 2. ...

  9. Python 类与对象 __init__()参数

    创建类Person 1 class Person: 2 def __init__(self, name, age): 3 self.name = name 4 self.age = age 5 pas ...

  10. Archive for required library:’ WebRoot/WEB-INF/Mytag.tld’in project ‘TagTest’ cannot be read or is not a valid ZIP file

    Description::部署tld文件时报错 我的解决方法: 右击(当前项目)->Build Path->Java Build Path ( Configure Build Path.. ...