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 相关文章推荐
popdiv
Jul 14 Javascript
比较详细的javascript对象的property和prototype是什么一种关系
Aug 06 Javascript
Javascript常用运算符(Operators)-javascript基础教程
Dec 14 Javascript
JQuery Ajax 跨域访问的解决方案
Mar 12 Javascript
jQuery筛选器children()案例详解(图文)
Feb 17 Javascript
input禁止键盘及中文输入,但可以点击
Feb 13 Javascript
jquery加载图片时以淡入方式显示的方法
Jan 14 Javascript
JavaScript实现表格快速变色效果代码
Aug 19 Javascript
js实现异步循环实现代码
Feb 16 Javascript
浅析Javascript的自动分号插入(ASI)机制
Sep 29 Javascript
vue-路由精讲 二级路由和三级路由的作用
Aug 06 Javascript
解决antd 表单设置默认值initialValue后验证失效的问题
Nov 02 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入门速成(2)
2006/10/09 PHP
不用数据库的多用户文件自由上传投票系统(2)
2006/10/09 PHP
Yii基于数组和对象的Model查询技巧实例详解
2015/12/28 PHP
PHP命名空间namespace的定义方法详解
2017/03/29 PHP
PHP页面静态化――纯静态与伪静态用法详解
2020/06/05 PHP
十个优秀的Ajax/Javascript实例网站收集
2010/03/31 Javascript
jQuery 数据缓存模块进化史详细介绍
2012/11/19 Javascript
Extjs中通过Tree加载右侧TabPanel具体实现
2013/05/05 Javascript
JavaScript中的连字符详解
2013/11/28 Javascript
解析Javascript中大括号“{}”的多义性
2013/12/02 Javascript
Jquery 过滤器(first,last,not,even,odd)的使用
2014/01/22 Javascript
js格式化时间和js格式化时间戳示例
2014/02/10 Javascript
使用js实现数据格式化
2014/12/03 Javascript
JavaScript获取数组最小值和最大值的方法
2015/06/09 Javascript
解决JS无法调用Controller问题的方法
2015/12/31 Javascript
Bootstrap框架动态生成Web页面文章内目录的方法
2016/05/12 Javascript
原生js实现返回顶部缓冲效果
2017/01/18 Javascript
jQuery树控件zTree使用方法详解(一)
2017/02/28 Javascript
基于vue实现一个禅道主页拖拽效果
2019/05/27 Javascript
Vue+axios封装请求实现前后端分离
2020/10/23 Javascript
[04:02]2014DOTA2国际邀请赛 BBC每日综述中国战队将再度登顶
2014/07/21 DOTA
python实现给字典添加条目的方法
2014/09/25 Python
Python中实现参数类型检查的简单方法
2015/04/21 Python
python交易记录链的实现过程详解
2019/07/03 Python
python中的global关键字的使用方法
2019/08/20 Python
tensorflow2.0与tensorflow1.0的性能区别介绍
2020/02/07 Python
Python如何把字典写入到CSV文件的方法示例
2020/08/23 Python
html5 offlline 缓存使用示例
2013/06/24 HTML / CSS
html5自动播放mov格式视频的实例代码
2020/01/14 HTML / CSS
应征英语教师求职信
2013/11/27 职场文书
建筑工地大门标语
2014/06/18 职场文书
销售经理工作检讨书
2015/02/19 职场文书
简单的辞职信怎么写
2015/02/28 职场文书
民间借贷纠纷答辩状
2015/08/03 职场文书
2016年春季趣味运动会开幕词
2016/03/04 职场文书
教你怎么用Python实现GIF动图的提取及合成
2021/06/15 Python