1. router-link

<router-link :to="{ path: 'yourPath', params: { name: 'name', dataObj: data }, query: { name: 'name', dataObj: data } }"> </router-link>

2. $router方式跳转

this.$router.push({
path: 'yourPath',
query: {
name: 'name',
dataObj: this.msg
}
})
this.$router.push('yourPath?code=123')

以上两种获取方式一样 ,this.$router.query.参数名

this.$router.push({
name: 'yourName',
params: {
name: 'name',
dataObj: this.msg
}
})

获取:this.$router.params.参数名

vue 路由跳转,路由传参的几种方式的更多相关文章

  1. Vue路由传参的几种方式

    原 Vue路由传参的几种方式 2018年07月28日 23:52:40 广积粮缓称王 阅读数 12613   前言:顾名思义,vue路由传参是指嵌套路由时父路由向子路由传递参数,否则操作无效.传参方式 ...

  2. vue 路由传参中刷新页面参数丢失 及传参的几种方式?

    在页面跳转中,我通过路由传参,结果发现页面参数丢失了.路径返回了根目录.... 1. 先说下路由传参的几种方式吧? 比如:<div v-for="item in items" ...

  3. react-绑定this并传参的三种方式

    绑定this并传参的三种方式 在事件中绑定this并传参: <input type="button" value="在事件中绑定this并传参" onCl ...

  4. ajax的data传参的两种方式

    ajax的data传参的两种方式 本文为转载. 1.[javascript] view plain copy /** * 订单取消 * @return {Boolean} 处理是否成功 */ func ...

  5. mybatis-plus 自定义SQL,XML形式,传参的几种方式

    mybatis-plus 自定义SQL,XML形式,传参的几种方式 前提说明 所涉及文件 传参类型说明 1.Java代码中使用QueryWrapper动态拼装SQL 2.简单类型参数(如String, ...

  6. vue路由传参的三种方式以及解决vue路由传参页面刷新参数丢失问题

    最近项目中涉及到跨页面传参数和后台进行数据交互,看到需求之后第一反应就是用路由传参来解决:Vue中给我们提供了三种路由传参方式,下面我们一个一个的来看一下: 方法一:params传参: this.$r ...

  7. jq ajax传参的两种方式

    第一种   在url ? 后通过拼接传参   第二种 通过data传参 (1)第一种方法:(通过url传参) function GetQuery(id) { if (id ==1||id==7) { ...

  8. vue 路由跳转,传参

    一.直接跳转 //js1.this.$router.push('/ad_new') //html 2.<router-link to="/ad_check"> < ...

  9. vue 和 react 路由跳转和传参

                      react  1 .跳转方式加传参 this.props.history.push({ //地址 pathname: '/film/Details', //路由传参 ...

  10. vue路由传参的三种方式区别(params,query)

    最近在做一个项目涉及到列表到详情页的参数的传递,网上搜索一下路由传参,结合自己的写法找到一种适合自己的,不过也对三种写法都有了了解,在此记录一下 <ul class="table_in ...

随机推荐

  1. linux LVM详解

    1.创建及删除步骤1)创建:linux partition-->pv-->vg-->lv-->fs-->mount2)删除:umount-->lv-->vg- ...

  2. [LeetCode] 23. Merge k Sorted Lists ☆☆☆☆☆

    转载:https://leetcode.windliang.cc/leetCode-23-Merge-k-Sorted-Lists.html 描述 Merge k sorted linked list ...

  3. vue 跳外链

    var host = window.location.host;var protocal = window.location.protocolwindow.location.href = protoc ...

  4. Transactional参数说明

     参数  说明 readOnly 该属性用于设置当前事务是否为只读事务,设置为true表示只读,false则表示可读写,默认值为false.例如:@Transactional(readOnly=tru ...

  5. js简单验证码的生成和验证

    如何用js生成简单验证码,并验证是否正确的方法 1.html页面如下 <div> <table border="0" cellspacing="5&qu ...

  6. ubuntu分辨率

    http://askubuntu.com/questions/235507/xconfig-xrandr-badmatch 先装驱动再说. 今天开机发现ubuntu分辨率不正常只有1024×768, ...

  7. laravel的日志服务

    日志服务使用: $app=app(); $log=$app->make('log'); $log->info('post_index',['data'=>'this is post ...

  8. laravel 的 intervention-image 图像处理笔记(备用)

    原文地址: http://blog.csdn.net/beyond__devil/article/details/62230610

  9. linux command useradd

    Linux command useradd [Purpose]        Learning linux command useradd to create a new user or update ...

  10. 计算机基础part1

    一:计算机的基本组成 1.计算机由输入单元.控制单元.算法逻辑单元.输出单元.存储单元,五大单元组成 二:概念篇 CPU:中央处理器,其内含有指令集(取码-解码-执行的过程) CPU同一时刻只能干一件 ...