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 相关文章推荐
自定义ExtJS控件之下拉树和下拉表格附源码
Oct 15 Javascript
如何在JavaScript中实现私有属性的写类方式(二)
Dec 04 Javascript
利用js读取动态网站从服务器端返回的数据
Feb 10 Javascript
js取模(求余数)隔行变色
May 15 Javascript
php基于redis处理session的方法
Mar 14 Javascript
浅析JavaScript中的平稳退化(graceful degradation)
Jul 24 Javascript
bootstrap表格内容过长时用省略号表示的解决方法
Nov 21 Javascript
angularJs提交文本框数据到后台的方法
Oct 08 Javascript
Vue.js 事件修饰符的使用教程
Nov 01 Javascript
如何在vue里面优雅的解决跨域(路由冲突问题)
Jan 20 Javascript
vue实现手机号码的校验实例代码(防抖函数的应用场景)
Sep 05 Javascript
JavaScript中的LHS和RHS分析详情
Apr 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
PHP 使用MySQL管理Session的回调函数详解
2013/06/21 PHP
ThinkPHP3.1基础知识快速入门
2014/06/19 PHP
PHP常用技术文之文件操作和目录操作总结
2014/09/27 PHP
JavaScript 学习小结(适合新手参考)
2009/07/30 Javascript
javascript实现的在当前窗口中漂浮框的代码
2010/03/15 Javascript
JavaScript和JQuery实用代码片段(一)
2010/04/07 Javascript
onsubmit阻止form表单提交与onclick的相关操作
2010/09/03 Javascript
js中的数组Array定义与sort方法使用示例
2013/08/29 Javascript
js动态往表格的td中添加图片并注册事件
2014/06/12 Javascript
如何使用AngularJs打造权限管理系统【简易型】
2016/05/09 Javascript
AngularJS中的JSONP实例解析
2016/12/01 Javascript
angularjs点击图片放大实现上传图片预览
2017/02/24 Javascript
js获取指定时间的前几秒
2017/04/05 Javascript
ExtJs的Ext.Ajax.request实现waitMsg等待提示效果
2017/06/14 Javascript
Vuex 入门教程
2018/01/10 Javascript
JS基于设计模式中的单例模式(Singleton)实现封装对数据增删改查功能
2018/02/06 Javascript
深入理解与使用keep-alive(配合router-view缓存整个路由页面)
2018/09/25 Javascript
react使用CSS实现react动画功能示例
2020/05/18 Javascript
vue 添加和编辑用同一个表单,el-form表单提交后清空表单数据操作
2020/08/03 Javascript
基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件功能
2021/02/23 Vue.js
[01:09]模型精美,特效酷炫!TI9不朽宝藏Ⅰ鉴赏
2019/05/10 DOTA
python使用pil进行图像处理(等比例压缩、裁剪)实例代码
2017/12/11 Python
Django压缩静态文件的实现方法详析
2018/08/26 Python
Python面向对象程序设计OOP深入分析【构造函数,组合类,工具类等】
2019/01/05 Python
Python实现简单石头剪刀布游戏
2021/01/20 Python
Django框架HttpRequest对象用法实例分析
2019/11/01 Python
基于python读取.mat文件并取出信息
2019/12/16 Python
python函数定义和调用过程详解
2020/02/09 Python
乌克兰排名第一的在线旅游超市:Farvater.Travel
2020/01/02 全球购物
十佳青年个人事迹材料
2014/01/28 职场文书
银行开业庆典方案
2014/02/06 职场文书
文明风采获奖感言
2014/02/18 职场文书
2014年两会学习心得体会
2014/03/10 职场文书
商超业务员岗位职责
2015/02/13 职场文书
幼儿园教师师德承诺书
2015/04/28 职场文书
Win11右下角图标点了没反应怎么办?Win11点击右下角图标无反应解决方法汇总
2022/07/07 数码科技