在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一试, ...
随机推荐
- 医院信息集成平台(ESB)数据集成建设方案
一.数据资产目录建设 依据卫生部信息化工作领导小组办公室卫生部统计信息中心2011年3月发布的<基于电子病历的医院信息平台建设技术解决方案——业务部分>. 临床服务域 包含12个二级类目: ...
- 安装包RPM包或源码包
RPM工具 # mount /dev/cdrom /mnt 挂载光盘 # rpm 软件包管理器 -i 安装(需要安装包完整名称) -v 可视化 -h 显示安装进度 ...
- Linux上用IP转发使内部网络连接互联网
IP转发的概念: 使 Linux 机器像路由器一样将数据从一个网络发送到另一个网络.所以,它能作为一个路由器或者代理服务器,实现将一个连接的互联网或者网络连接共享给多个客户端机器. 1. 启用 IPv ...
- RF之关键字、变量、循环
关键字的使用: RF的能力是由关键字提供的,所以,我们必须对RF的常用关键字有个了解 . 最常用的关键字就在RF的关键字中.http://robotframework.org 其中Builtin是标准 ...
- 《Web Development with Go》Mangodb查询一条记录
select加where package main import ( "fmt" "log" "time" "gopkg.in/m ...
- PHP最新面试题2019
1.字符串"0"在PHP和js中转换为布尔值是false还是true php:false; php 弱语言 '0'和0一样: js:true:字符串除了空字符串('')其他都是t ...
- php的swoole和rpc区别
RPC是远程过程调用(Remote Procedure Call)的缩写形式. SAP系统RPC调用的原理其实很简单,有一些类似于三层构架的C/S系统,第三方的客户程序通过接口调用SAP内部的标准或自 ...
- HTML DOM属性
innerHTML属性 获取元素内容的最简单方法是使用innerHTML属性 innerHTML属性对于获取或替换HTML元素的内容很有用 innerHTML属性可用于获取或改变任意HTML元素,包括 ...
- React 面试问题
eact 面试问题 如果你是一位有理想的前端开发人员,并且正在准备面试,那么这篇文章就是为你准备的.本文收集了 React 面试中最常见的 50 大问题,这是一份理想的指南,让你为 React 相关的 ...
- 字节跳动——IT技术工程师面试题
.自我介绍 .项目介绍 .争对个人项目进行提问 .场景模拟 .1如何知道用户的指定视频(类似于QQ发视频)的服务是正常的 .使用appum进行自动化测试 .使用bat脚本获取进程状态,然后定时发送em ...