当前是vue项目,想在tool.js(工具模块)中封装一个跳转页面的方法,

goToUrl(name,query){
if(query){
if(query.addressCode){
vueObject.$router.push({name:name,query:query});
}else{
query.addressCode = this.getParam('addressCode');
this.$router.push({name:name,query:query});
}
}else{
var query = {};
query.addressCode = this.getParam('addressCode');
this.$router.push({name:name,query:query});
}
}

上面使用router,query传参的方式实现页面跳转

然后我在vue页面中调用,此方法如:

query.addressCode = tool.getAddressCode();
query.groupId = id;
tool.goToUrl('productDetails',query);

之后报错就来了,提示:push是undefined

然后console了一下goToUrl()方法里面的this,指向的是tool.js整个模块对象!

知道问题所在后,剩下的就是解决了,如何让goToUrl()方法中的this指向vue实例呢?

我第一个想到的就是,在调用tools.js的页面  将vue实例传给 该方法,我们只需要在方法内多加一个参数,将vue实例传过来就行了,看后续代码:

goToUrl(vueObject,name,query){
if(query){
if(query.addressCode){
vueObject.$router.push({name:name,query:query});
}else{
query.addressCode = this.getParam('addressCode');
vueObject.$router.push({name:name,query:query});
}
}else{
var query = {};
query.addressCode = this.getParam('addressCode');
vueObject.$router.push({name:name,query:query});
}
}
vueObject参数就是vue实例
在页面中使用时:
            var self = this;
var query = {};
query.addressCode = tool.getAddressCode();
query.groupId = id;
tool.goToUrl(self,'productDetails',query);

self就是vue实例

 

vue项目中 如何让外部引入的js模块 的this值 指向vue实例的更多相关文章

  1. Vue项目中如何引用外部js

    第一种方法:(感觉这个有问题) 1.把需要的js放到static文件夹下 2.在Index.html页面引入 3.在webpack.base.conf.js添加下面代码 externals: { 'W ...

  2. vue项目中主要文件的加载顺序(index.html、App.vue、main.js)

    先后顺序: index.html > App.vue的export外的js代码 > main.js > App.vue的export里面的js代码 > Index.vue的ex ...

  3. Vue项目中导入excel文件读取成js数组

    1. 安装组件 cnpm install xlsx --save 2. 代码 <template> <span> <input class="input-fil ...

  4. vue 项目中实用的小技巧

    # 在Vue 项目中引入Bootstrap 有时在vue项目中会根据需求引入Bootstrap,而Bootstrap又是依赖于jQuery的,在使用npm按照时,可能会出现一系列的错误 1.安装jQu ...

  5. 转:如何在Vue项目中使用vw实现移动端适配

    https://www.w3cplus.com/mobile/vw-layout-in-vue.html 有关于移动端的适配布局一直以来都是众说纷纭,对应的解决方案也是有很多种.在<使用Flex ...

  6. 在Vue项目中使用vw实现移动端适配

    有关于移动端的适配布局一直以来都是众说纷纭,对应的解决方案也是有很多种.在<使用Flexible实现手淘H5页面的终端适配>提出了Flexible的布局方案,随着viewport单位越来越 ...

  7. Vue项目中如何使用Element-UI以及如何使用sass

    Vue项目中如何使用Element-UI以及如何使用sass 当我们在开发Vue项目的时候通常会选择Element-UI作为我们的UI框架,其官方中文文档地址是http://element.eleme ...

  8. 如何在Vue项目中使用vw实现移动端适配(转)

    有关于移动端的适配布局一直以来都是众说纷纭,对应的解决方案也是有很多种.在<使用Flexible实现手淘H5页面的终端适配>提出了Flexible的布局方案,随着viewport单位越来越 ...

  9. 如何在Vue项目中使用vw实现移动端适配

    有关于移动端的适配布局一直以来都是众说纷纭,对应的解决方案也是有很多种.在< 使用Flexible实现手淘H5页面的终端适配>提出了Flexible的布局方案,随着 viewport 单位 ...

随机推荐

  1. asp.net ashx一般处理程序实现async await异步操作

    目前项目存在页面展示大量图片,效率不高,考虑优化性能,改为ashx+异步下载的方式,废话不说直接贴code: using System; using System.Web; using System. ...

  2. stm32+rx8025

    // 设备读写地址 #define        RX8025_ADDR_READ                0x65 #define        RX8025_ADDR_WRITE       ...

  3. JavaScript Scroll家族以及封装

    JavaScript Scroll家族以及封装 scrollTop & scrollLeft 别卷去的值,就是当滑动滚轮浏览网页的时候,网页隐藏在屏幕上方或左侧的距离 获得scrollTop ...

  4. Java知多少(15)字符串

    从表面上看,字符串就是双引号之间的数据,例如“微学苑”.“http://www.weixueyuan.net”等.在Java中,可以使用下面的方法定义字符串:    String stringName ...

  5. Ubuntu下Apache虚拟主机+反向代理

    反向代理 就是通过一台代理服务器,让Internet用户可以访问到内部网络上的服务器 下图中192.168.0.4 可以理解带有2个网卡,一个是公网ip,一个是192.168.0.4 代理内外中的2个 ...

  6. 为什么我们做分布式使用Redis?

    绝大部分写业务的程序员,在实际开发中使用 Redis 的时候,只会 Set Value 和 Get Value 两个操作,对 Redis 整体缺乏一个认知.这里对 Redis 常见问题做一个总结,解决 ...

  7. 面向切面编程AOP,一些通用装饰器

    1.一些装饰器,可以减少重复编写.比较常用的. 用的时候函数上面加上装饰器就可以.这是一些装饰器,加在函数或者方法上,减少了很多重复代码. 除此之外工作中也用一些mixin类大幅减少代码. impor ...

  8. MTK 隐藏底部状态栏

    步骤: 源码/frameworks/base/policy/src/com/android/internal/policy/impl目录下修改PhoneWindowManager.java文件. 修改 ...

  9. [SLAM] ***AR Tracking based on which tools?

    SLAM虽然小复杂,但对于开发者而言,ar sdk通常会解决这个问题. 所以相对于识别,跟踪是个看上去高大上但实则不需要关注细节的部分. 识别,要技术深耕:跟踪,需行业深耕. 在此了解下常见的ar s ...

  10. 08策略模式Strategy

    一.什么是策略模式 Strategy模式也叫策略模式是行为模式之一, 它对一系列的算法加以封装,为所有算法定义一 个抽象的算法接口,并通过继承该抽象算法接口 对所有的算法加以封装和实现,具体的算法选择 ...