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. 『无为则无心』Python基础 — 11、Python中的数据类型转换

    目录 1.为什么要进行数据类型转换 2.数据类型转换本质 3.数据类型转换用到的函数 4.常用数据类型转换的函数 (1)int()函数 (2)float()函数 (3)str()函数 (4)bool( ...

  2. Java安全之基于Tomcat实现内存马

    Java安全之基于Tomcat实现内存马 0x00 前言 在近年来红队行动中,基本上除了非必要情况,一般会选择打入内存马,然后再去连接.而落地Jsp文件也任意被设备给检测到,从而得到攻击路径,删除we ...

  3. 《MySQL面试小抄》索引失效场景验证

    我是肥哥,一名不专业的面试官! 我是囧囧,一名积极找工作的小菜鸟! 囧囧表示:小白面试最怕的就是面试官问的知识点太笼统,自己无法快速定位到关键问题点!!! 本期主要面试考点 面试官考点之什么情况下会索 ...

  4. Unity触发碰撞

    原文链接:Unity触发碰撞介绍 3D触发器与碰撞器 触发信息检测: 1.MonoBehaviour.OnTriggerEnter(Collider collider)当进入触发器 2.MonoBeh ...

  5. AWS上的EFK环境部署

    1.准备工作及组件 本章使用自建服务以及aws服务来配置使用. 服务 版本 作用 filebeat 6.7.2→ 7.3.1 节点日志收集,只完成少量比如多行合并工作 logstash 6.4.2→7 ...

  6. Vue 全局组件

    全局注册的组件可以在其他组件内直接使用,它在整个Vue实例中都是全局有效的. 非单文件组件中使用 Vue.component('student-list', { template: ` <div ...

  7. Spring data Jpa 提供的validator验证

  8. Linux | 系统状态检测

    ifconfig ifconfig 命令用于获取网卡配置与网络状态等信息,格式 ifconfig[网络设备][参数] 使用 ifconfig 命令来查看本机当前的网卡配置与网络状态等信息时,其实主要查 ...

  9. vivo x9i ADB 模拟点击

    手机连接电脑无反应,安装360驱动大师 更多设置--关于---多次点击软件版本号--开启开发者选项 USB调试--USB模拟点击(需要密码开启)

  10. 论文阅读:Visual-Inertial Localization With Prior LiDAR Map Constraints

    介绍 提出了一个低代价双目视觉惯导定位系统,实现了基于多状态约束下的卡尔曼滤波器(MSCKF)VIO,采用了先验雷达地图.除了稀疏的视觉特征,雷达地图与半稠密的点云也通过紧耦合的MSCKF进行更新,进 ...