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高级程序设计 扩展--关于动态原型
Nov 09 Javascript
简单实用的全选反选按钮例子
Oct 18 Javascript
详解jQuery UI库中文本输入自动补全功能的用法
Apr 23 Javascript
图解prototype、proto和constructor的三角关系
Jul 31 Javascript
AngularJS通过$http和服务器通信详解
Sep 21 Javascript
js实现本地图片文件拖拽效果
Jul 18 Javascript
详解最新vue-cli 2.9.1的webpack存在问题
Dec 16 Javascript
解决vue2.0 element-ui中el-upload的before-upload方法返回false时submit()不生效问题
Aug 24 Javascript
vue iview实现动态新增和删除
Jun 17 Javascript
JavaScript多种图形实现代码实例
Jun 28 Javascript
原生JS实现九宫格抽奖
Sep 13 Javascript
JS监听Esc 键触发事键
Apr 14 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中json_encode不兼容JSON_UNESCAPED_UNICODE的解决方案
2016/05/31 PHP
PHP中empty,isset,is_null用法和区别
2017/02/19 PHP
PHP命名空间与自动加载类详解
2018/09/04 PHP
PHP字符串中抽取子串操作实例分析
2019/06/22 PHP
smarty模板的使用方法实例分析
2019/09/18 PHP
Laravel框架处理用户的请求操作详解
2019/12/20 PHP
javascript 年月日联动实现核心代码
2009/12/21 Javascript
js通过googleAIP翻译PHP系统的语言配置的实现代码
2011/10/17 Javascript
js跨域问题浅析及解决方法优缺点对比
2014/11/08 Javascript
详解JavaScript数组的操作大全
2015/10/19 Javascript
JS实现的打字机效果完整实例
2016/06/20 Javascript
JQuery为元素添加样式的实现方法
2016/07/20 Javascript
基于jQuery实现发送短信验证码后的倒计时功能(无视页面关闭)
2016/09/02 Javascript
bootstrap选项卡使用方法解析
2017/01/11 Javascript
微信小程序登录态控制深入分析
2017/04/12 Javascript
vue axios 给生产环境和发布环境配置不同的接口地址(推荐)
2018/05/08 Javascript
原生JS实现DOM加载完成马上执行JS代码的方法
2018/09/07 Javascript
JavaScript冒泡算法原理与实现方法深入理解
2020/06/04 Javascript
python计算N天之后日期的方法
2015/03/31 Python
Python有序字典简单实现方法示例
2017/09/28 Python
Flask框架模板继承实现方法分析
2019/07/31 Python
Python序列对象与String类型内置方法详解
2019/10/22 Python
Python底层封装实现方法详解
2020/01/22 Python
使用keras2.0 将Merge层改为函数式
2020/05/23 Python
奥地利顶级内衣丝袜品牌英国站:Wolford英国
2016/08/29 全球购物
美国时尚配饰品牌:Dooney & Bourke
2017/11/14 全球购物
The North Face北面英国官网:美国著名户外品牌
2017/12/13 全球购物
什么是servlet
2012/05/08 面试题
施工安全协议书
2013/12/11 职场文书
18岁生日感言
2014/01/12 职场文书
歌唱比赛主持词
2014/03/18 职场文书
《海伦?凯勒》教学反思
2014/04/17 职场文书
公司离职证明样本
2014/09/13 职场文书
学校纪律作风整改措施思想汇报
2014/10/11 职场文书
装修公司工程部经理岗位职责
2015/04/09 职场文书
MySQL 外连接语法之 OUTER JOIN
2022/04/09 MySQL