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 相关文章推荐
HTML5附件拖拽上传drop &amp; google.gears实现代码
Apr 28 Javascript
为jquery的ajaxfileupload增加附加参数的方法
Mar 04 Javascript
js实现飞入星星特效代码
Oct 17 Javascript
基于豆瓣API+Angular开发的web App
Jan 02 Javascript
js实现常用排序算法
Aug 09 Javascript
浅谈JSON.stringify()和JOSN.parse()方法的不同
Aug 29 Javascript
Bootstrap3 图片(响应式图片&amp;图片形状)
Jan 04 Javascript
深入理解javascript的getTime()方法
Feb 16 Javascript
AngularJS 最常用的八种功能(基础知识)
Jun 26 Javascript
Vue中组件之间数据的传递的示例代码
Sep 08 Javascript
微信小程序实现聊天对话(文本、图片)功能
Jul 06 Javascript
echarts设置图例颜色和地图底色的方法实例
Aug 01 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
收集的DedeCMS一些使用经验
2007/03/17 PHP
Ext.data.PagingMemoryProxy分页一次性读取数据的实现代码
2010/04/07 PHP
php中CI操作多个数据库的代码
2012/07/05 PHP
详解PHP数据压缩、加解密(pack, unpack)
2016/12/17 PHP
PHP异常处理定义与使用方法分析
2017/07/25 PHP
js封装的textarea操作方法集合(兼容很好)
2010/11/16 Javascript
浅析js中取绝对值的2种方法
2013/07/09 Javascript
JSF中confirm弹出框的用法示例介绍
2014/01/07 Javascript
Angular设置title信息解决SEO方面存在问题
2016/08/19 Javascript
BootStrap模态框不垂直居中的解决方法
2017/10/19 Javascript
JS+CSS3实现的简易钟表效果示例
2019/04/13 Javascript
JS实现简单的文字无缝上下滚动功能示例
2019/06/22 Javascript
使用Vue调取接口,并渲染数据的示例代码
2019/10/28 Javascript
js实现计时器秒表功能
2019/12/16 Javascript
跟老齐学Python之print详解
2014/09/28 Python
python数据结构之列表和元组的详解
2017/09/23 Python
python编程线性回归代码示例
2017/12/07 Python
Django入门使用示例
2017/12/12 Python
python 使用sys.stdin和fileinput读入标准输入的方法
2018/10/17 Python
python实现桌面壁纸切换功能
2019/01/21 Python
python多线程下信号处理程序示例
2019/05/31 Python
python 实现多线程下载m3u8格式视频并使用fmmpeg合并
2019/11/15 Python
pytorch 实现模型不同层设置不同的学习率方式
2020/01/06 Python
解决django框架model中外键不落实到数据库问题
2020/05/20 Python
有关HTML5中背景音乐的自动播放功能
2017/10/16 HTML / CSS
html5 外链式实现加减乘除的代码
2019/09/04 HTML / CSS
中学生爱国演讲稿
2013/12/31 职场文书
政法大学毕业生自荐信范文
2014/01/01 职场文书
奶茶店创业计划书范文
2014/01/17 职场文书
教师业务学习制度
2014/01/25 职场文书
《燕子》教学反思
2014/02/18 职场文书
仓库文员岗位职责
2014/04/06 职场文书
员工辞职信怎么写
2015/02/27 职场文书
美德少年主要事迹材料
2015/11/04 职场文书
优秀家长事迹材料(2016推荐版)
2016/02/29 职场文书
公司晚会主持词
2019/04/17 职场文书