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 相关文章推荐
Jquery getJSON方法详细分析
Dec 26 Javascript
javascript创建动态表单的方法
Jul 25 Javascript
JavaScript中的cacheStorage使用详解
Jul 29 Javascript
JQuery实现的按钮倒计时效果
Dec 23 Javascript
使用 bootstrap modal遇到的问题小结
Nov 09 Javascript
Angular1.x自定义指令实例详解
Mar 01 Javascript
JavaScript手风琴页面制作
May 17 Javascript
文本溢出插件jquery.dotdotdot.js使用方法详解
Jun 22 jQuery
微信小程序如何调用新闻接口实现列表循环
Jul 02 Javascript
详解Vue 换肤方案验证
Aug 28 Javascript
vue多页面项目中路由使用history模式的方法
Sep 23 Javascript
layer.confirm()右边按钮实现href的例子
Sep 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
十大感人催泪爱情动漫 第一名至今不忍在看第二遍
2020/03/04 日漫
PHP insert语法详解
2008/06/07 PHP
免费的ip数据库淘宝IP地址库简介和PHP调用实例
2014/04/08 PHP
javascript检测对象中是否存在某个属性判断方法小结
2013/05/19 Javascript
js中array的sort()方法使用介绍
2014/02/20 Javascript
javascript事件函数中获得事件源的两种不错方法
2014/03/17 Javascript
angularjs 处理多个异步请求方法汇总
2015/01/06 Javascript
利用BootStrap弹出二级对话框的简单实现方法
2016/09/21 Javascript
nodejs结合Socket.IO实现的即时通讯功能详解
2018/01/12 NodeJs
JS动画实现回调地狱promise的实例代码详解
2018/11/08 Javascript
Webpack4+Babel7+ES6兼容IE8的实现
2019/04/10 Javascript
解决VUE双向绑定失效的问题
2019/10/29 Javascript
Threejs实现滴滴官网首页地球动画功能
2020/07/13 Javascript
[01:08:43]DOTA2-DPC中国联赛定级赛 Phoenix vs DLG BO3第一场 1月9日
2021/03/11 DOTA
python实现的简单猜数字游戏
2015/04/04 Python
Python采集代理ip并判断是否可用和定时更新的方法
2018/05/07 Python
python实现简单日志记录库glog的使用
2019/12/13 Python
Pycharm 2020最新永久激活码(附最新激活码和插件)
2020/09/17 Python
Python 文件数据读写的具体实现
2020/01/24 Python
Matplotlib使用字符串代替变量绘制散点图的方法
2020/02/17 Python
Python3监控疫情的完整代码
2020/02/20 Python
使用sklearn对多分类的每个类别进行指标评价操作
2020/06/11 Python
深入浅析Python代码规范性检测
2020/07/31 Python
Python+pyftpdlib实现局域网文件互传
2020/08/24 Python
Python3如何使用range函数替代xrange函数
2020/10/05 Python
三星新西兰官网:Samsung新西兰
2019/03/05 全球购物
长安大学毕业生自我鉴定
2014/01/17 职场文书
化工专业自荐书
2014/06/16 职场文书
计划生育证明格式及范本
2014/10/09 职场文书
学生上课说话检讨书
2014/10/25 职场文书
师德师风学习材料
2014/12/19 职场文书
一年级数学下册复习计划
2015/01/17 职场文书
奖学金感谢信
2015/01/21 职场文书
2015教师年度工作总结范文
2015/04/07 职场文书
离婚案件答辩状
2015/05/22 职场文书
应届毕业生的自我评价
2019/06/21 职场文书