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 卷帘效果实现代码(不同方向)
Feb 05 Javascript
node+express+jade制作简单网站指南
Nov 26 Javascript
jQuery实现图片走马灯效果的原理分析
Jan 16 Javascript
js css+html实现简单的日历
Jul 14 Javascript
关于js原型的面试题讲解
Sep 25 Javascript
详解用webpack2.0构建vue2.0超详细精简版
Apr 05 Javascript
基于jquery的on和click的区别详解
Jan 15 jQuery
玩转vue的slot内容分发
Sep 22 Javascript
vue 右键菜单插件 简单、可扩展、样式自定义的右键菜单
Nov 29 Javascript
vue 集成jTopo 处理方法
Aug 07 Javascript
微信接入之获取用户头像的方法步骤
Sep 23 Javascript
VUE 组件转换为微信小程序组件的方法
Nov 06 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
2019十大人气国漫
2020/03/13 国漫
php实现zip压缩文件解压缩代码分享(简单易懂)
2014/05/10 PHP
laravel 框架实现无限级分类的方法示例
2019/10/31 PHP
javascript复制对象使用说明
2011/06/28 Javascript
jquery利用event.which方法获取键盘输入值的代码
2011/10/09 Javascript
完美解决AJAX跨域问题
2013/11/01 Javascript
javascript创建和存储cookie示例
2014/01/07 Javascript
IE9+已经不对document.createElement向下兼容的解决方法
2015/09/14 Javascript
使用RequireJS库加载JavaScript模块的实例教程
2016/06/06 Javascript
Angular 路由route实例代码
2016/07/12 Javascript
jQuery中checkbox反复调用attr('checked', true/false)只有第一次生效的解决方法
2016/11/16 Javascript
Node.js操作redis实现添加查询功能
2017/05/25 Javascript
BackBone及其实例探究_动力节点Java学院整理
2017/07/14 Javascript
angular.extend方法的具体使用
2017/09/14 Javascript
详解tween.js的使用教程
2017/09/14 Javascript
微信小程序实现tab页面切换功能
2018/07/13 Javascript
10种JavaScript最常见的错误(小结)
2019/06/21 Javascript
小程序实现录音功能
2020/09/22 Javascript
在Python的Tornado框架中实现简单的在线代理的教程
2015/05/02 Python
python基于Tkinter库实现简单文本编辑器实例
2015/05/05 Python
Python基于Tkinter实现的记事本实例
2015/06/17 Python
在Python的Django框架中编写编译函数
2015/07/20 Python
python的多重继承的理解
2017/08/06 Python
Python查找两个有序列表中位数的方法【基于归并算法】
2018/04/20 Python
python实现基于信息增益的决策树归纳
2018/12/18 Python
Python Django简单实现session登录注销过程详解
2019/08/06 Python
详解pycharm连接不上mysql数据库的解决办法
2020/01/10 Python
解决python多线程报错:AttributeError: Can't pickle local object问题
2020/04/08 Python
Python list和str互转的实现示例
2020/11/16 Python
英国手工布艺沙发在线购买:Sofas & Stuff
2018/03/02 全球购物
市场策划求职信
2014/08/07 职场文书
省委召开党的群众路线教育实践活动总结大会报告
2014/10/21 职场文书
接待员岗位职责范本
2015/04/15 职场文书
办公室主任岗位竞聘书
2015/09/15 职场文书
CSS实现隐藏搜索框功能(动画正反向序列)
2021/07/21 HTML / CSS
java多态注意项小结
2021/10/16 Java/Android