当前是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. android 自定义无限循环播放的viewPager。轮播ViewPager。实现循环播放 广告,主题内容,活动,新闻内容时。

    前言 实际项目需要一个 播放广告的控件,可能有多个广告图片.每个一段时间更换该图片.简单来说,就是一个 “循环播放图片”的控件. 间隔时间更换图片 一般来说,图片切换时需要有动画效果 需要支持手势,用 ...

  2. 教你一招:修复win7 系统自带的截图工具损坏

    这个问题经常见,原因是注册表没有导入. 修复很简单. 打开资源管理器,在C盘中搜索到 tpcps.dll ,在其中选一个右击,选择注册dll,然后截图工具就被修复了. 有时候便签也会出现类似问题,方法 ...

  3. Android GIS +webservice

    Android新手经典入门教程 Android开发教程(完全免费版) Android SDK v3.1.0 Android定位功能(一) Android定位功能(二) Android 百度地图开发(一 ...

  4. 关于Unity的两种调试方法

    Unity的两种调试方法 1.Debug.Log()输出语句调试,平时经常用这个 2.把MonoDevelop和Unity进行连接后断点调试 先把编辑器选择为MonoDevelop,Edit----& ...

  5. Scala学习笔记(四):apply方法说明

    当scala中类或者对象有一个主要用途的时候,apply方法就是一个很好地语法糖.请看下面一个简单的例子: class Foo(foo: String) {} object Foo { def app ...

  6. 【03月04日】A股滚动市盈率PE历史新低排名

    2010年01月01日 到 2018年12月05日 之间,滚动市盈率历史新低排名. 上市三年以上的公司,2018年12月05日市盈率在300以下的公司. 1 - 青松股份(SZ300132) - 历史 ...

  7. [Bayes] runif: Inversion Sampling

    runifum Inversion Sampling 看样子就是个路人甲. Ref: [Bayes] Hist & line: Reject Sampling and Importance S ...

  8. [PyData] 01 - Web Crawler

    前言 一.总体策略 一些常见抓取数据的例子.三步走: 抓取数据并存储 <---- 数据处理 数据展示 二.学习资源 首先,通过Beautiful Soup抓取数据 from http://www ...

  9. nodejs 单线程 高并发

    nodejs为什么是单线程且支持高并发的脚本语言呢? 1.node的优点:I/O密集型处理(node的I/O请求都是异步的,如:sql查询.文件流操作.http请求……):异步I/O?顾名思义就是异步 ...

  10. Windows Server 2008 R2 64位操作系统安装Oracle 11g 64位数据库,在客户终端上安装Oracle 11g 32位,才能安装P/L Sql Developer并配置

    1.下载Oracle 11g R2 for Windows的版本 下载地址: http://www.oracle.com/technetwork/database/enterprise-edition ...