专栏首页开发架构二三事vue之vue-router传值

vue之vue-router传值

vue-router在跳转时传递和接收参数方法。 跳转方法

  • this.$router.push() 描述:跳转到不同的url,但这个方法会向history栈添加一个记录,点击后退会返回到上一个页面。
  • this.$router.replace() 描述:同样是跳转到指定的url,但是这个方法不会向history里面添加新的记录,点击返回,会跳转到上上一个页面。上一个记录是不存在的。
  • this.$router.go(n) 相对于当前页面向前或向后跳转多少个页面,类似 window.history.go(n)。n可为正数可为负数。正数返回上一个页面
1. router.go(1)相当于history.forward();
2. router.go(-1)相当于histroy.back();
  • this.$router.resolve 解析路由
打开新页面并传递参数:
let routeData = this.$router.resolve({ name: 'accountApply', query: {  customerId: '123'} });
    window.open(routeData.href, '_blank');

push详解

query方式传参和接收参数

  • 传参
this.$router.push({
        path:'/xxx'
        query:{
          id:id
        }
      })
  • 接收参数
this.$route.query.id

使用这种方式,传递参数会拼接在路由后面,出现在地址栏

params方式传参和接收参数

  • 传参
this.$router.push({
        name:'xxx'
        params:{
          id:id
        }
      })
  • 接收参数
this.$route.params.id

使用这种方式,参数不会拼接在路由后面,地址栏上看不到参数

在path中做文章

  • 配置
  • 传参
<router-link to="personManager/123/名称">执行跳转</router-link>
  • 接收参数
this.$route.params.id的值是123
this.$route.params.name的值是名称

也可以在js中接收参数:

data() {
      return {
        activeName: 'apply',
        userId: this.$route.params.id
      };
    },

本文分享自微信公众号 - 开发架构二三事(gh_d6f166e26398),作者:两个小灰象

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-10-09

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 一个由request.getParameter与request.getInputStream引发的bug

    其实出现这个的原因是Servlet在socket上的读取只能一次。request.getParameter与request.getInputStream这两个系...

    开发架构二三事
  • dubbo中使用hystrix遇到ThreadLocal变量的上下文传递时问题分析

    在实际运行时,大多数情况下会出现 consumer 端放入的 traceId 和国际化变量在 provider 端取不到的情况。而且具体分析时发现,consum...

    开发架构二三事
  • vue之router文档

    查看 dist 目录. 注意,dist 目录下的文件是最新稳定版,不会同步更新到 dev 分支上的最新代码

    开发架构二三事
  • 8.1 水位自动控制

    1,水池Pool,底面积为1m2,初始液位为1m,水的初始容积为1m3,目标水位(targetLevel)控制在1.2m,实际液位(actualLevel)受入...

    周星星9527
  • Swoole入门到实战(二):进程,内存和协程、Swoole完美支持ThinkPHP5

    以树状图显示进程间的关系:pstree -p 进程id 启动成功后会创建worker_num+2个进程。Master进程+Manager进程+s...

    唐成勇
  • Button按钮--inject与provide

    inject 和 provider 是vue中的组合选项,需要一起使用。目的是允许一个祖先组件向其所有子孙后代注入依赖(简单地说就是祖先组件向子孙后代传值的一种...

    用户1148399
  • python爬虫(爬取视频)

    小小咸鱼YwY
  • 9.1 汽包锅炉水位自动控制

    1,水池Pool,底面积为1m2,初始液位为1m,水的初始容积为1m3,目标水位(targetLevel)控制在1.2m,实际液位(actualLevel)受入...

    周星星9527
  • Node程序debug小记

    今天调试一个程序,用到了一个很久之前的NPM包,名为formstream,用来将form表单数据转换为流的形式进行接口调用时的数据传递。

    贾顺名
  • highchar的x轴数据自动生成

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。 ...

    逝兮诚

扫码关注云+社区

领取腾讯云代金券

玩转腾讯云 有奖征文活动