vue中this.$router.push()路由传值和获取的两种常见方法
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()路由传值和获取的两种常见方法的更多相关文章
- vue 中 this.$router.push() 路由跳转传参 及 参数接收的方法
传递参数的方法:1.Params 由于动态路由也是传递params的,所以在 this.$router.push() 方法中 path不能和params一起使用,否则params将无效.需要用name ...
- Vue中this.$router.push(参数) 实现页面跳转
很多情况下,我们在执行点击按钮跳转页面之前还会执行一系列方法,这时可以使用 this.$router.push(location) 来修改 url,完成跳转. push 后面可以是对象,也可以是字符串 ...
- Vue中this.$router.push参数获取(通过路由传参)【路由跳转的方法】
传递参数的方法: 1.Params 由于动态路由也是传递params的,所以在 this.$router.push() 方法中 path不能和params一起使用,否则params将无效.需要用nam ...
- Vue中this.$router.push参数获取
传递参数的方法:1.Params 由于动态路由也是传递params的,所以在 this.$router.push() 方法中path不能和params一起使用,否则params将无效.需要用name来 ...
- vue中this.$router.push() 传参
1 params 传参 注意⚠️:patams传参 ,路径不能使用path 只能使用name,不然获取不到传的数据 this.$router.push({name: 'dispatch', para ...
- 路由传值及获取参数,路由跳转,路由检测,this.$route.query和this.$route.params接收参数,HttpGet请求拼接url参数
配置动态路由参数id: routes: [ // 动态路径参数 以冒号开头 { path: '/user/:id', component: User } ] html路由跳转: <router- ...
- 【面试题】Vue中的$router 和 $route的区别
Vue中的$router 和 $route的区别 点击视频讲解更加详细 this.$route:当前激活的路由的信息对象.每个对象都是局部的,可以获取当前路由的 path, name, params, ...
- Vue中使用children实现路由的嵌套
Vue中使用children实现路由的嵌套 相关Html: <!DOCTYPE html> <html lang="en"> <head> &l ...
- vue中如何不通过路由直接获取url中的参数
前言:为什么要不通过路由直接获取url中的参数? vue中使用路由的方式设置url参数,但是这种方式必须要在路径中附带参数,而且这个参数是需要在vue的路由中提前设置好的. 相对来说,在某些情况下直接 ...
随机推荐
- Ubuntu安装部署Kafka
Ubuntu安装部署Kafka 环境: Ubuntu 18.04.4 LTS ,JDK1.8,kafka_2.12-2.3.1 确保已经安装了JDK,JDK安装过程不再赘述.可参考文章xxxx 一.下 ...
- .NET 云原生架构师训练营(Identity Server)--学习笔记
目录 OAuth 2.0 OpenID Connect QuickStart OAuth 2.0 概念 过程 通信 组件 示例代码 概念 OAuth 2.0 是一个授权协议,它允许软件应用代表(而不是 ...
- .net core mysql entity映射时字符串被截断
参考地址:https://stackoverflow.com/questions/40833262/net-core-entity-framework-mysql-string-fields-stor ...
- 4、mysql登录密码修改和找回
操作适合5.1-5.5:当前的环境是5.5的环境: 4.1.mysql启动的原理: mysqld_safe -> my.cnf ->mysql.sock http://blog.51cto ...
- 面试系列——Mysql索引
1.索引分类 Hash索引Hash 索引查询效率很高,时间复杂度O(1).Mysql Innodb引擎不支持hash索引的.Hash索引适合精确查找,不适合范围查找. 平衡二叉树时间复杂度为 O(n) ...
- Linux + .net core 开发升讯威在线客服系统:同时支持 SQL Server 和 MySQL 的实现方法
前段时间我发表了一系列文章,开始介绍基于 .net core 的在线客服系统开发过程. 有很多朋友一直提出希望能够支持 MySQL 数据库,考虑到已经有朋友在用 SQL Server,我在升级的过程中 ...
- CentOS-查找删除历史文件
背景:因服务器磁盘空间有限,根据实际情况控制保留指定的几天内的历史文件 find参数说明: /home/tmp 设置查找的目录 -mtime +30 设置修改时间为30天前 ...
- Maven:Maven的project标签报错红线
作者在外网完成demo项目,把Maven的本地库打成压缩包放进内网时,Maven的project标签报错红线,且别的依赖不报错,同时Maven不引入本地仓库的依赖包. 解决方法: 进入自己的Maven ...
- Linux:Linux操作防火墙命令
首先查看Linux的防火墙是否关闭 firewall-cmd Linux上新用的防火墙软件,跟iptables差不多的工具. firewall-cmd --state # 显示防火墙状态 system ...
- 第六章 time库的使用
time库概述 time库是python中处理时间的标准库 1.用于计算机时间的表达 2.提供获取系统时间并格式化输出功能 3.提供系统级精确计时功能,用于程序性能分析 1 import time 2 ...