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的路由中提前设置好的. 相对来说,在某些情况下直接 ...
随机推荐
- SpringCloud Alibaba实战(7:nacos注册中心管理微服务)
源码地址:https://gitee.com/fighter3/eshop-project.git 持续更新中-- 在上一节我们已经完成了Nacos Server的本地部署,这一节我们学习如何将Nac ...
- Java语言实现二维码的生成
众所周知,现在生活中二维码已经是无处不见.走在街道上,随处可见广告标语旁有二维码,手机上QQ,微信加个好友都能通过二维码的方式,我不知道是什么时候兴起的二维码浪潮,但是我知道,这在我小时候可是见不到的 ...
- 携程二面:讲讲 MySQL 中的 WAL 策略和 CheckPoint 技术
前段时间我在准备暑期实习嘛,这是当时面携程的时候二面的一道问题,我一脸懵逼,赶紧道歉,不好意思不知道没了解过,面试官又解释说 redo log,我寻思着 redo log 我知道啊,WAL 是啥?给面 ...
- Unity Lamba错误集
请先看对象层级视图 /// <summary> /// 选择关卡的内容对象 /// </summary> public Transform Transform_levelCon ...
- kubernetes获取崩溃容器/上一个容器的应用日志
kubectl logs命令将显示当前容器的日志.当你想知道为什么前一个容器终止时,你想看到的是前一个容器的日志,而不是当前容器的.可以通过添加--previous选项来完成: $ kubectl l ...
- Elasticsearch查询文档总数
前言 在使用ES搜索的时候,或多或少都会面临查询数据总量的情况,下面介绍三种查询数据总量的方式. 其中,方案二解决了当结果数据总量超过1w时,由于ES默认设置(max_result_window:10 ...
- 第9章:Ingress
9.1 Ingress为弥补NodePort不足而生 1 单独用service暴露服务的方式,在实际生产环境中不太合适 ClusterIP 只能在集群内部访问. NodePort 方式的话,测试环境使 ...
- 第6章:深入理解Pod对象
Pod是最小的部署单元,也是后面经常配置的地方,本章节带你熟悉Pod中常见资源配置及参数. 也就是YAML这部分: ... template: metadata: labels: app: web s ...
- solidity基础知识
1.solidity是一种语法类似JavaScript的高级语言,它被设计成以编译的方式生成以太坊虚拟机代码.在后续的内容中你将会发现,使用它很容易创建用于投票.众筹.封闭拍卖.多重签名钱包等等的合约 ...
- SQLite Encryption(加密)新姿势
什么是SQLite? SQLite是一个C语言实现的小型.快速.自包含.高可靠性.功能全面的SQL数据库引擎. 起因: 刚好项目上有个需求,需要使用VS2019+.Net famework 4.6.1 ...