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显示随机图像或引用
Apr 21 Javascript
javascript 面向对象编程  function是方法(函数)
Sep 17 Javascript
javascript自定义in_array()函数实现方法
Aug 03 Javascript
JavaScript+CSS实现仿天猫侧边网页菜单效果
Aug 25 Javascript
JS 实现可停顿的垂直滚动实例代码
Nov 23 Javascript
JS实现数组按升序及降序排列的方法
Apr 26 Javascript
关于jQuery.ajax()的jsonp碰上post详解
Jul 02 jQuery
vue-cli项目如何使用vue-resource获取本地的json数据(模拟服务端返回数据)
Aug 04 Javascript
Layui数据表格之单元格编辑方式
Oct 26 Javascript
js实现页面图片消除效果
Mar 24 Javascript
VUE中setTimeout和setInterval自动销毁案例
Sep 07 Javascript
利用 Chrome Dev Tools 进行页面性能分析的步骤说明(前端性能优化)
Feb 24 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实现把文本中的URL转换为链接的auolink()函数分享
2014/07/29 PHP
php使用cookie实现记住登录状态
2015/04/27 PHP
PHP面向对象五大原则之里氏替换原则(LSP)详解
2018/04/08 PHP
PHP-FPM和Nginx的通信机制详解
2019/02/01 PHP
PHP fopen函数用法实例讲解
2019/02/15 PHP
Laravel Eloquent分表方法并使用模型关联的实现
2019/11/25 PHP
PHP sdk文档处理常用代码示例解析
2020/12/09 PHP
图片完美缩放
2006/09/07 Javascript
类之Prototype.js学习
2007/06/13 Javascript
图片格式的JavaScript和CSS速查手册
2007/08/20 Javascript
基于jquery实现后台左侧菜单点击上下滑动显示
2013/04/11 Javascript
js实现全屏漂浮广告移入光标停止移动
2013/12/02 Javascript
jquery禁止输入数字以外的字符的示例(纯数字验证码)
2014/04/10 Javascript
详解nodejs中express搭建权限管理系统
2017/09/15 NodeJs
微信小程序js文件改变参数并在视图上及时更新【推荐】
2018/06/11 Javascript
详解JavaScript中操作符和表达式
2018/09/12 Javascript
Vue中el-form标签中的自定义el-select下拉框标签功能
2020/04/20 Javascript
vue绑定数字类型 value为数字的实例
2020/08/31 Javascript
js实现扫雷源代码
2020/11/27 Javascript
在Python中使用HTMLParser解析HTML的教程
2015/04/29 Python
python 出现SyntaxError: non-keyword arg after keyword arg错误解决办法
2017/02/14 Python
pandas DataFrame数据转为list的方法
2018/04/11 Python
Python实现的爬取网易动态评论操作示例
2018/06/06 Python
python中使用psutil查看内存占用的情况
2018/06/11 Python
caffe binaryproto 与 npy相互转换的实例讲解
2018/07/09 Python
Python使用jsonpath-rw模块处理Json对象操作示例
2018/07/31 Python
在Python中使用Neo4j的方法
2019/03/14 Python
python实现局域网内实时通信代码
2019/12/22 Python
Django 用户认证Auth组件的使用
2020/11/30 Python
全球立体声:World Wide Stereo
2018/09/29 全球购物
汽车检测与维修应届毕业生求职信
2013/10/19 职场文书
地理教师岗位职责
2014/03/16 职场文书
协会周年庆活动方案
2014/08/26 职场文书
声乐专业大学生职业生涯规划书:理想的未来需要自己去打造
2014/09/20 职场文书
Python基础之元类详解
2021/04/29 Python
mysqldump进行数据备份详解
2022/07/15 MySQL