vue 路由跳转,路由传参的几种方式
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 路由跳转,路由传参的几种方式的更多相关文章
- Vue路由传参的几种方式
原 Vue路由传参的几种方式 2018年07月28日 23:52:40 广积粮缓称王 阅读数 12613 前言:顾名思义,vue路由传参是指嵌套路由时父路由向子路由传递参数,否则操作无效.传参方式 ...
- vue 路由传参中刷新页面参数丢失 及传参的几种方式?
在页面跳转中,我通过路由传参,结果发现页面参数丢失了.路径返回了根目录.... 1. 先说下路由传参的几种方式吧? 比如:<div v-for="item in items" ...
- react-绑定this并传参的三种方式
绑定this并传参的三种方式 在事件中绑定this并传参: <input type="button" value="在事件中绑定this并传参" onCl ...
- ajax的data传参的两种方式
ajax的data传参的两种方式 本文为转载. 1.[javascript] view plain copy /** * 订单取消 * @return {Boolean} 处理是否成功 */ func ...
- mybatis-plus 自定义SQL,XML形式,传参的几种方式
mybatis-plus 自定义SQL,XML形式,传参的几种方式 前提说明 所涉及文件 传参类型说明 1.Java代码中使用QueryWrapper动态拼装SQL 2.简单类型参数(如String, ...
- vue路由传参的三种方式以及解决vue路由传参页面刷新参数丢失问题
最近项目中涉及到跨页面传参数和后台进行数据交互,看到需求之后第一反应就是用路由传参来解决:Vue中给我们提供了三种路由传参方式,下面我们一个一个的来看一下: 方法一:params传参: this.$r ...
- jq ajax传参的两种方式
第一种 在url ? 后通过拼接传参 第二种 通过data传参 (1)第一种方法:(通过url传参) function GetQuery(id) { if (id ==1||id==7) { ...
- vue 路由跳转,传参
一.直接跳转 //js1.this.$router.push('/ad_new') //html 2.<router-link to="/ad_check"> < ...
- vue 和 react 路由跳转和传参
react 1 .跳转方式加传参 this.props.history.push({ //地址 pathname: '/film/Details', //路由传参 ...
- vue路由传参的三种方式区别(params,query)
最近在做一个项目涉及到列表到详情页的参数的传递,网上搜索一下路由传参,结合自己的写法找到一种适合自己的,不过也对三种写法都有了了解,在此记录一下 <ul class="table_in ...
随机推荐
- linux LVM详解
1.创建及删除步骤1)创建:linux partition-->pv-->vg-->lv-->fs-->mount2)删除:umount-->lv-->vg- ...
- [LeetCode] 23. Merge k Sorted Lists ☆☆☆☆☆
转载:https://leetcode.windliang.cc/leetCode-23-Merge-k-Sorted-Lists.html 描述 Merge k sorted linked list ...
- vue 跳外链
var host = window.location.host;var protocal = window.location.protocolwindow.location.href = protoc ...
- Transactional参数说明
参数 说明 readOnly 该属性用于设置当前事务是否为只读事务,设置为true表示只读,false则表示可读写,默认值为false.例如:@Transactional(readOnly=tru ...
- js简单验证码的生成和验证
如何用js生成简单验证码,并验证是否正确的方法 1.html页面如下 <div> <table border="0" cellspacing="5&qu ...
- ubuntu分辨率
http://askubuntu.com/questions/235507/xconfig-xrandr-badmatch 先装驱动再说. 今天开机发现ubuntu分辨率不正常只有1024×768, ...
- laravel的日志服务
日志服务使用: $app=app(); $log=$app->make('log'); $log->info('post_index',['data'=>'this is post ...
- laravel 的 intervention-image 图像处理笔记(备用)
原文地址: http://blog.csdn.net/beyond__devil/article/details/62230610
- linux command useradd
Linux command useradd [Purpose] Learning linux command useradd to create a new user or update ...
- 计算机基础part1
一:计算机的基本组成 1.计算机由输入单元.控制单元.算法逻辑单元.输出单元.存储单元,五大单元组成 二:概念篇 CPU:中央处理器,其内含有指令集(取码-解码-执行的过程) CPU同一时刻只能干一件 ...