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 相关文章推荐
Extjs4中的分页应用结合前后台
Dec 13 Javascript
node.js中的http.createServer方法使用说明
Dec 14 Javascript
jquery中EasyUI使用技巧小结
Feb 10 Javascript
文本框只能输入数字的实现方法(兼容IE火狐)
Jun 25 Javascript
bootstrap IE8 兼容性处理
Mar 22 Javascript
jQuery实现下拉菜单的实例代码
Jun 19 jQuery
Vue.js实现一个todo-list的上移下移删除功能
Jun 26 Javascript
jQuery 利用ztree实现树形表格的实例代码
Sep 27 jQuery
Vue.js自定义事件的表单输入组件方法
Mar 08 Javascript
javascript验证form表单数据的案例详解
Mar 25 Javascript
vue+element UI实现树形表格带复选框的示例代码
Apr 16 Javascript
Ajax常用封装库——Axios的使用
May 08 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
再次研究下cache_lite
2007/02/14 PHP
SWFUpload与CI不能正确上传识别文件MIME类型解决方法分享
2011/04/18 PHP
PHP 小心urldecode引发的SQL注入漏洞
2011/10/27 PHP
Thinkphp+smarty+uploadify实现无刷新上传
2015/07/30 PHP
jQuery 注意事项 与原因分析
2009/04/24 Javascript
Jquery 基础学习笔记之文档处理
2009/05/29 Javascript
javascript下利用arguments实现string.format函数
2010/08/24 Javascript
js判断undefined类型,undefined,null, 的区别详细解析
2013/12/16 Javascript
JS实现自动切换文字的导航效果代码
2015/08/27 Javascript
JS实现可展开折叠层的鼠标拖曳效果
2015/10/09 Javascript
JavaScript制作淘宝星级评分效果的思路
2020/06/23 Javascript
Angular2 (RC5) 路由与导航详解
2016/09/21 Javascript
jQuery checkbox选中问题之prop与attr注意点分析
2016/11/15 Javascript
angular双向绑定模拟探索
2016/12/26 Javascript
微信小程序 本地图片按照屏幕尺寸处理
2017/08/04 Javascript
在 Angular 中使用Chart.js 和 ng2-charts的示例代码
2017/08/17 Javascript
js实现方块上下左右移动效果
2017/08/17 Javascript
Vue.js实现网格列表布局转换方法
2017/08/25 Javascript
cocos2dx+lua实现橡皮擦功能
2018/12/20 Javascript
详解vue在项目中使用百度地图
2019/03/26 Javascript
Vue多环境代理配置方法思路详解
2019/06/21 Javascript
javascript实现文字跑马灯效果
2020/06/18 Javascript
[03:18]DOTA2放量测试专访820:希望玩家加入国服大家庭
2013/08/25 DOTA
python进阶教程之循环对象
2014/08/30 Python
Python中使用tarfile压缩、解压tar归档文件示例
2015/04/05 Python
使用Python脚本将文字转换为图片的实例分享
2015/08/29 Python
使用numpy和PIL进行简单的图像处理方法
2018/07/02 Python
python把转列表为集合的方法
2019/06/28 Python
Django 开发调试工具 Django-debug-toolbar使用详解
2019/07/23 Python
Django 项目通过加载不同env文件来区分不同环境
2020/02/17 Python
Python任务自动化工具tox使用教程
2020/03/17 Python
Python实现区域填充的示例代码
2021/02/03 Python
J2SDK1.5与J2SDK5.0有什么区别
2012/09/19 面试题
2015年护士节活动总结
2015/02/10 职场文书
PostgreSQL怎么创建分区表详解
2022/06/25 PostgreSQL