在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一试, ...
随机推荐
- Python核心技术与实战 笔记
基础篇 Jupyter Notebook 优点 整合所有的资源 交互性编程体验 零成本重现结果 实践站点 Jupyter 官方 Google Research 提供的 Colab 环境 安装 运行 列 ...
- Task.Factory.StartNew 测试
到底该用多少线程?线程数.CPU核心数.本地计算时间.等待时间的关系 线程数 = CPU核心数 * ( 本地计算时间 + 等待时间 ) / 本地计算时间 下面是Task.Factory.StartNe ...
- Oracle转SqlServer
基础数据所对应的类型不同 在Oracle中有一些基础类型与Sqlserver中名字一样,但是所存储的数据格式不同,Date类型在Oracle中精确到秒,在Sqlserver中只能精确到天 表的结构 O ...
- 如何把Mybatis的Mapper.xml配置文件和dao接口放在同一个包下
有的时候我们在Maven项目中写关于Mybatis的项目时,会涉及到很多的实体类,也就会涉及到很多的dao接口,如果此时我们仍然把dao接口和xml写在同一个包下,会让项目接口变得很乱,杂七杂八的,所 ...
- VS2019 开发Django(五)------createsuperuser
导航:VS2019开发Django系列 上篇我们已经把LazyOrders中用到的C#的实体转成了Django中的Entity,并且已经迁移数据库成功,那么,今天继续介绍Django中内置的数据库操作 ...
- React: 研究Flux设计模式
一.简介 一般来说,State管理在React中是一种最常用的实现机制,使用这种state管理系统基本可以开发各种需求的应用程序.然而,随着应用程序规模的不断扩张,原有的这种State管理系统就会暴露 ...
- OpenResty + ModSecurity + OWASP CRS
本篇将介绍如何使用OpenResty和ModSecurity 来构建自己的WAF,安装过程整体与Nginx是类似的,但也有些区别,在文中会特别指出,本篇算是用openresty对前面两篇nginx和c ...
- easybcd误删Win10启动项,UEFI恢复引导
参考文章https://blog.csdn.net/A_Sen_A/article/details/89545311 想给电脑安Ubuntu双系统,期间根据一些不靠谱的文章用了easybcd软件,Ub ...
- SAP-BP 创建客商(摘抄)
FORM frm_bp02 . * 更改供应商所需变量 DATA:l_xfeld TYPE xfeld, "复选框 ls_data TYPE vmds_ei_main, "供应商总 ...
- python3 print() 函数带颜色输出 示例
1.1 实现过程: 终端的字符颜色是用转义序列控制的,是文本模式下的系统显示功能,和具体的语言无关. 转义序列是以ESC开头,即用\033来完成(ESC的ASCII码用十进制表示是27,用八进制表示就 ...