当前是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. halcon区域运算

    区域运算: Ø 并:union1().union2(): Ø 交:intersection(); Ø 差:difference(); Ø 补:complement():

  2. (转)基于形状匹配的Halcon算子create_shape_model

    HDevelop开发环境中提供的匹配的方法主要有三种,即Component-Based.Gray-Value-Based.Shape-Based,分别是基于组件(或成分.元素)的匹配,基于灰度值的匹配 ...

  3. 关于Unity中NGUI的帧动画和Tween动画

    帧动画 1.把三张帧动画的贴图png制作成图集,NGUI---->Open---->Atlas Maker,生成一个预制体,一个材质球,一个大图 2.创建一个Sprite类型的Sprite ...

  4. golang获取命令行参数

    部署golang项目时难免要通过命令行来设置一些参数,那么在golang中如何操作命令行参数呢?可以使用os库和flag库. 1.golang os库获取命令行参数 os可以通过变量Args来获取命令 ...

  5. linux 斜杠/

    inux OS: 使用”/“   例子:/home/user/XXX 特例:路径中某目录名包含空格,在命令行中使用cd等命令书写路径时,则要在空格前加”\“ 例子: 主目录(/home/student ...

  6. DapperExtensions and Dapper.Contrib在表构架不是默认dbo时的处理 DapperExtensions and Dapper.Contrib with non-dbo Schema

    什么是数据库的Schema dbo是一个构架(schema),与sql2000不同的是,在sql2005中,表的调用格式如下:"数据库名.构架名.表名",同一个用户可以被授权访问多 ...

  7. [Stats385] Lecture 01-02, warm up with some questions

    Theories of Deep Learning 借该课程,进入战略要地的局部战斗中,采用红色字体表示值得深究的概念,以及想起的一些需要注意的地方. Lecture 01 Lecture01: De ...

  8. Xlight FTP搭建FTP服务器教程

    Xlight FTP搭建FTP服务器教程 1. 服务器公共设置 设置FTP 端口, ip 等 FTP 服务器公共的设定 2. 设定 FTP 用户, FTP 目录 等信息    备注: 这个用户是非Wi ...

  9. python 多返回值

    多返回值: def count(): fs = [] for i in range(1, 4): def f(j): def g(): return j*j return g fs.append(f( ...

  10. java.util.ResourceBundle学习笔记

    一.初次使用,从网上查的资料,知识点参考JDK API和博文http://lavasoft.blog.51cto.com/62575/184605(该博主写的清晰易懂) 二.自己在程序中的具体应用: ...