vue从一个页面跳转到另一个页面并携带参数的解决方法


Posted in Javascript onAugust 12, 2019

1.需求:

vue从一个页面跳转到另一个页面并携带参数的解决方法

点击商场跳转到商业体列表

vue从一个页面跳转到另一个页面并携带参数的解决方法

解决方案:

元页面:

a标签中添加跳转函数

<a class="orderBtn1 sIRicon2" href="javascript:void(0);" rel="external nofollow" @click="toMallInfo('M000989')"><i class="sIRicon"></i>商场</a>
toMallInfo: function(mallCode){
    this.$router.push({
     path: '/propertyInfo/mall/mallList',
     // name: 'mallList',
     query: {
      mallCode: 'M000989'
     }
    })
   },

将将跳转的url添加到 $router中。

path 中的url 最前面加 / 代表是根目录下,不加则是子路由

通过path + query 的组合传递参数

----

跳转页面接收参数

created(){
   this.getParams()
  },
methods :{getParams(){
    // 取到路由带过来的参数
    const routerParams = this.$route.query.mallCode
    // 将数据放在当前组件的数据内
    this.mallInfo.searchMap.mallCode = routerParams;
    this.keyupMallName()
   }
  },
  watch: {
   '$route': 'getParams'
  }

解决!!!

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript MD4
Dec 20 Javascript
javascript定义变量时有var和没有var的区别探讨
Jul 21 Javascript
jQuery中;function($,undefined) 前面的分号的用处
Dec 17 Javascript
js下拉选择框与输入框联动实现添加选中值到输入框的方法
Aug 17 Javascript
JavaScript实现同时调用多个函数的方法
Nov 09 Javascript
jquery在ie7下选择器的问题导致append失效的解决方法
Jan 10 Javascript
Ajax实现不刷新取最新商品
Mar 01 Javascript
基于jQuery和CSS3实现APPLE TV海报视差效果
Jun 16 jQuery
koa源码中promise的解读
Nov 13 Javascript
详解Vue项目引入CreateJS的方法(亲测可用)
May 30 Javascript
微信小程序批量上传图片到七牛(推荐)
Dec 19 Javascript
JavaScript中变量提升机制示例详解
Dec 27 Javascript
解析原来浏览器原生支持JS Base64编码解码
Aug 12 #Javascript
在vue-cli 3中给stylus、sass样式传入共享的全局变量
Aug 12 #Javascript
微信小程序实现页面跳转传递参数(实体,对象)
Aug 12 #Javascript
微信小程序实现传递多个参数与事件处理
Aug 12 #Javascript
node命令行工具之实现项目工程自动初始化的标准流程
Aug 12 #Javascript
五分钟搞懂Vuex实用知识(小结)
Aug 12 #Javascript
no-vnc和node.js实现web远程桌面的完整步骤
Aug 11 #Javascript
You might like
PHP clearstatcache()函数详解
2010/03/02 PHP
php实现猴子选大王问题算法实例
2015/04/20 PHP
php格式化电话号码的方法
2015/04/24 PHP
php结合curl实现多线程抓取
2015/07/09 PHP
WordPress中转义HTML与过滤链接的相关PHP函数使用解析
2015/12/22 PHP
php上传图片获取路径及给表单字段赋值的方法
2016/01/23 PHP
Yii2搭建后台并实现rbac权限控制完整实例教程
2016/04/28 PHP
用PHP写的一个冒泡排序法的函数简单实例
2016/05/26 PHP
PHP编程求最大公约数与最小公倍数的方法示例
2017/05/29 PHP
javascript 检测浏览器类型和版本的代码
2009/09/15 Javascript
Google排名中的10个最著名的 JavaScript库
2010/04/27 Javascript
javascript 事件处理程序介绍
2012/06/27 Javascript
获取offsetTop和offsetLeft值的js代码(兼容)
2013/04/16 Javascript
js字符串操作方法实例分析
2015/05/06 Javascript
jQuery实现的可编辑表格完整实例
2016/06/20 Javascript
Angularjs实现搜索关键字高亮显示效果
2017/01/17 Javascript
Vue单页式应用(Hash模式下)实现微信分享的实例
2017/07/21 Javascript
webpack公共组件引用路径简化小技巧
2018/06/15 Javascript
Nodejs中怎么实现函数的串行执行
2019/03/02 NodeJs
JS实现网站吸顶条
2020/01/08 Javascript
基于vue和websocket的多人在线聊天室
2020/02/01 Javascript
js实现3D旋转效果
2020/08/18 Javascript
[01:45]IMBATV TI4前线报道-选手到达
2014/07/07 DOTA
可用于监控 mysql Master Slave 状态的python代码
2013/02/10 Python
python base64 decode incorrect padding错误解决方法
2015/01/08 Python
快速查询Python文档方法分享
2017/12/27 Python
python3使用smtplib实现发送邮件功能
2018/05/22 Python
Python列表(List)知识点总结
2019/02/18 Python
pytorch学习教程之自定义数据集
2020/11/10 Python
最新PyCharm 2020.2.3永久激活码(亲测有效)
2020/11/26 Python
LUISAVIAROMA德国官网:时尚奢侈品牌购物网站
2020/11/12 全球购物
杭州时比特电子有限公司SQL
2013/08/22 面试题
VLAN和VPN有什么区别?分别实现在OSI的第几层?
2014/12/23 面试题
关于读书的演讲稿
2014/05/07 职场文书
教师节感恩老师演讲稿
2014/08/28 职场文书
2014年文秘工作总结
2014/11/25 职场文书