在vue项目中的js文件里使用vue实例
参考的网址:https://blog.csdn.net/weixin_34353714/article/details/86958742
不为其他,就为了记录一下,方便以后查看:
第一种方法:
1、首先在http.js中:定义一个变量context用来接收vue,再定一个initVue方法传入的参数是vue,并导出这个方法。
import axios from 'axios'
const TIME_OUT_MS = 60 * 1000 // 默认请求超时时间
let context = null // 定义一个变量,用来代替this(vue)
function handleResults (response) {
context.$router.push('/login')
return result
}
export default {
// 写一个此文件引入vue的方法,然后export导出去
initContext (vue) {
context = vue
},
post (url, data, response, exception) { },
2、然后在main.js中:执行http.js导出的initContext方法
var vue = new Vue({
el: '#app',
router,
components: {App},
template: '<App/>'
})
Vue.prototype.http = http
//挂载http的时候执行引入vue的方法
Vue.prototype.http.initContext(vue) // 传入vue实例
第二种方法:
1、main.js导出vue实例:
var vue = new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})
export default vue
2、在需要使用的js中引入
import context from '../main.js'
context.$router.push('/login')
我选择了使用第二种方法;
在vue项目中的js文件里使用vue实例的更多相关文章
- 在被vue组件引用的 js 文件里获取组件实例this
思路: 通过调用函数 把 组件实例this 传递 到 被应用的 js文件里 实例: 文件结构 在SendThis.vue 文件中引用 了modalConfig.js import modalConf ...
- 在普通js文件里引入vue实例的方法
首先是我是写了一个 Loading 插件然后 是挂在打vue.prototype 原型上的. 在main.js中use使用了这个插件. 至此vue原型是就被我挂上 $loadding方法了. 然后我想 ...
- Vue 项目中对路由文件进行拆分(解构的方法)
项目需求场景: 在开发项目过程中,在项目过于庞大,路由信息非常多的情况下,如果将路由配置信息都放在一个文件里面,那么这个JS是不方便维护的, 那么,这个时候需要我们把这个庞大的路由文件,根据项目功能分 ...
- Vue项目中引入外部文件(css、js、less)
例子中css文件采用bootstrap.css,js文件采用jQuery,less文件用less.less(自定义文件) 步骤一:安装webpack cnpm install webpack -g 步 ...
- vue-cli构建的vue项目中引入stylus文件
在写基于vue-cli的vue项目时,如果直接引入styl文件,会报错,需要安装stylus.stylus-loader依赖以及别名配置. 1.下载安装stylus.stylus-loader,推荐使 ...
- 向MyEclipse的项目中导入js文件时,出现小红叉
这个问题困扰我很久.刚开始时,也没有解决,因此也在网上寻找解决方法,还是没能解决.最近做项目时再一次出现了这样的问题,于是决定还是再找找办法.在此,分享一下自己的解决方法,给正处于痛苦中的童鞋们带来解 ...
- vue项目中导出Excel文件功能的前端代码实现
在项目中遇到了两种不同情况, 1.get请求导出文件,实现起来相对简单 // 导出数据 exportData() { window.location.href = `/oes-content-mana ...
- Vue项目中导入excel文件读取成js数组
1. 安装组件 cnpm install xlsx --save 2. 代码 <template> <span> <input class="input-fil ...
- vue项目中操作PDF文件
以前从来没接触过前端要求显示PDF文件,一时之间有点懵逼,不知从哪下手啊... 无奈之下,去找度娘,方法还不少,iframe embed object这些标签就可以, 可是拿过来做个demo一试, ...
随机推荐
- JavaFX如何制作鼠标多击事件?
JavaFX制作鼠标双击或者多击事件需要用到getClickCount()方法,这个方法需要添加addEventHandler()方法,addEventHandler()是事件方法. 1 scene. ...
- iOS核心动画高级技巧 - 7
13. 高效绘图 高效绘图 不必要的效率考虑往往是性能问题的万恶之源. ——William Allan Wulf 在第12章『速度的曲率』我们学习如何用Instruments来诊断Core Anima ...
- PMBOK 指南 第二章 项目运行环境
2.1概述 事业环境因素(EEF)源于项目外部(往往企业外部) 组织过程资产(OPA)源于企业内部 2.2 事业环境因素 项目团队不能控制 2.2.1 组织内部的事业环境因素 组织文化.结构和治理 设 ...
- 百度大脑UNIT3.0智能对话技术全面解析
智能客服.智能家居.智能助手.智能车机.智能政务……赋予产品智能对话能力是提升产品智能化体验.高效服务的重要手段,已经开始被越来越多的企业关注并布局.然而,智能对话系统搭建涉及NLP.知识图谱.语音等 ...
- Csharp:HttpWebRequest or HttpClient
/// <summary> /// Define other methods and classes here /// </summary> /// <param nam ...
- CentOS 服务器版安装教程(超级详细图解)
使用安装说明:http://www.jb51.net/os/85895.html
- python-基础-isinstance(p_object, class_or_type_or_tuple)
1.isinstance(p_object, class_or_type_or_tuple) p_object:实例 class_or_type_or_tuple:类型,可以是一个类型或者是组成的元组 ...
- 【UR #6】懒癌
Problem Description 你绞尽脑汁也没有解开智商锁给的迷题,只见哐地一下门就开了:"您与锁的主人智商一致." 于是你们窃取了大量内部资料,最后端掉了 \(IIIS\ ...
- 【AGC028D】Chord
Problem Description 给定一个圆,圆上均等地放着 \(2n\) 个点,已有 \(k\) 对点之间连好了边,从中选择剩下 \(n-k\) 对点随意连边. 求所有连边方案中,联通块的个数 ...
- epub.js的使用
epub.js的使用 npm安装 npm install epubjs epub阅读器开发 ePub电子书解析和渲染 生成Book对象 this.book = new Epub(DOWNLOAD_UR ...