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 相关文章推荐
Convert Seconds To Hours
Jun 16 Javascript
jquery中实现标签切换效果的代码
Mar 01 Javascript
jquery方法+js一般方法+js面向对象方法实现拖拽效果
Aug 30 Javascript
javascript对JSON数据排序的3个例子
Apr 12 Javascript
js实现头像图片切割缩放及无刷新上传图片的方法
Jul 17 Javascript
JS获取数组最大值、最小值及长度的方法
Nov 24 Javascript
基于JavaScript创建动态Dom
Dec 08 Javascript
jQuery Mobile 和 Kendo UI 的比较
May 05 Javascript
JS基于正则表达式实现的密码强度验证功能示例
Sep 21 Javascript
详解vue.js移动端配置flexible.js及注意事项
Apr 10 Javascript
bootstrap table.js动态填充单元格数据的多种方法
Jul 18 Javascript
vant 解决tab切换插件标题样式自定义的问题
Nov 13 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 编写的日历
2006/10/09 PHP
php将图片保存入mysql数据库失败的解决方法
2014/12/27 PHP
PHP读取、解析eml文件及生成网页的方法示例
2017/09/04 PHP
PHP的curl函数的用法总结
2019/02/14 PHP
Moment.js 不容错过的超棒Javascript日期处理类库
2012/04/15 Javascript
30分钟就入门的正则表达式基础教程
2013/02/25 Javascript
jQuery的each终止或跳过示例代码
2013/12/12 Javascript
js 显示base64编码的二进制流网页图片
2014/04/04 Javascript
js判断手机号运营商的方法
2015/10/23 Javascript
jQuery中绑定事件bind() on() live() one()的异同
2017/02/23 Javascript
css和js实现弹出登录居中界面完整代码
2017/11/26 Javascript
基于element-ui组件手动实现单选和上传功能
2018/12/06 Javascript
JS倒计时两种实现方式代码实例
2020/07/27 Javascript
[52:40]完美世界DOTA2联赛PWL S2 Magma vs GXR 第一场 11.29
2020/12/02 DOTA
python根据给定文件返回文件名和扩展名的方法
2015/03/27 Python
Python中的下划线详解
2015/06/24 Python
Python切片索引用法示例
2018/05/15 Python
Linux下python3.7.0安装教程
2018/07/30 Python
pandas 选取行和列数据的方法详解
2019/08/08 Python
python实现图片上添加图片
2019/11/26 Python
Python 面向对象静态方法、类方法、属性方法知识点小结
2020/03/09 Python
深入浅出CSS3 background-clip,background-origin和border-image教程
2011/01/27 HTML / CSS
浅谈CSS3鼠标移入图片动态提示效果(transform)
2017/11/06 HTML / CSS
南京某公司笔试题
2013/01/27 面试题
日语专业毕业生求职信
2013/12/04 职场文书
市场营销管理制度
2014/01/29 职场文书
学习自我鉴定
2014/02/01 职场文书
金融学专业大学生职业生涯规划
2014/03/07 职场文书
公司晚会主持词
2014/03/22 职场文书
关工委先进个人事迹材料
2014/05/23 职场文书
公司委托书范本5篇
2014/09/20 职场文书
党员国庆节演讲稿范文2014
2014/09/21 职场文书
浅谈什么是SpringBoot异常处理自动配置的原理
2021/06/21 Java/Android
为什么MySQL选择Repeatable Read作为默认隔离级别
2021/07/26 MySQL
Android自定义scrollview实现回弹效果
2022/04/01 Java/Android
python实现对doc、txt、xls等文档的读写操作
2022/04/02 Python