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 相关文章推荐
基于jQuery的前端数据通用验证库
Aug 08 Javascript
jQuery中:visible选择器用法实例
Dec 30 Javascript
iScroll中事件点击触发两次解决方案
Mar 11 Javascript
JavaScript原生对象之Date对象的属性和方法详解
Mar 13 Javascript
用Move.js配合创建CSS3动画的入门指引
Jul 22 Javascript
第八篇Bootstrap下拉菜单实例代码
Jun 21 Javascript
JavaScript中removeChild 方法开发示例代码
Aug 15 Javascript
Vue监听数组变化源码解析
Mar 09 Javascript
Vue2几种常见开局方式详解
Sep 09 Javascript
用vue2.0实现点击选中active其他选项互斥的效果
Apr 12 Javascript
如何用JavaScipt测网速
May 09 Javascript
JS前端轻量fabric.js系列物体基类
Aug 05 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中mb_strpos的使用
2018/02/04 PHP
Laravel多域名下字段验证的方法
2019/04/04 PHP
javascript算法题 求任意一个1-9位不重复的N位数在该组合中的大小排列序号
2012/07/21 Javascript
jquery 自定义容器下雨效果可将下雨图标改为其他
2014/04/23 Javascript
javascript获取重复次数最多的字符
2015/07/08 Javascript
jQuery实现的导航动画效果(附demo源码)
2016/04/01 Javascript
Javascript中prototype的使用详解
2016/06/18 Javascript
jquery 中toggle的2种用法详解(推荐)
2016/09/02 Javascript
jQuery Collapse1.1.0折叠插件简单使用
2017/08/28 jQuery
js中的闭包学习心得
2018/02/06 Javascript
Vue进度条progressbar组件功能
2018/04/17 Javascript
vue-cli 脚手架基于Nightwatch的端到端测试环境的过程
2018/09/30 Javascript
详解vue-router导航守卫
2019/01/19 Javascript
详解使用WebPack搭建React开发环境
2019/08/06 Javascript
js原生map实现的方法总结
2020/01/19 Javascript
vue中重定向redirect:‘/index‘,不显示问题、跳转出错的完美解决
2020/09/28 Javascript
Python中的getopt函数使用详解
2015/07/28 Python
python OpenCV学习笔记实现二维直方图
2018/02/08 Python
Java编程迭代地删除文件夹及其下的所有文件实例
2018/02/10 Python
Python实现带参数的用户验证功能装饰器示例
2018/12/14 Python
Python爬虫使用代理IP的实现
2019/10/27 Python
Python爬取腾讯视频评论的思路详解
2019/12/19 Python
Django框架教程之中间件MiddleWare浅析
2019/12/29 Python
Python结合Window计划任务监测邮件的示例代码
2020/08/05 Python
python-图片流传输的思路及示例(url转换二维码)
2020/12/21 Python
香港个人化生活购物网站:Ballyhoo Limited
2016/09/10 全球购物
巴西食品补充剂在线零售商:Músculos na Web
2017/08/07 全球购物
PREMIUM-MALL法国:行李、箱包及配件在线
2019/05/30 全球购物
微软马来西亚官方网站:Microsoft马来西亚
2019/11/22 全球购物
物业管理员岗位职责范文
2013/11/25 职场文书
2014年三八妇女节活动总结
2014/03/01 职场文书
网络技术专业求职信
2014/05/02 职场文书
钳工实训报告总结
2014/11/04 职场文书
2015年计划生育协会工作总结
2015/05/13 职场文书
2015年会计年终工作总结
2015/05/26 职场文书
Java Spring Lifecycle的使用
2022/05/06 Java/Android