在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一试, ...
随机推荐
- 如何快速将百度大脑AI技术内置智能小程序中
实现效果: 该AI智能小程序目前集成了百度AI开放平台数十个AI服务产品功能,包括人脸识别.文字识别.表格识别.红酒识别.货币识别.地标识别.手势识别.商标识别.果蔬识别.菜品识别等图片识别功能,以及 ...
- IT兄弟连 HTML5教程 在移动设备上设置原始大小显示
在iPhone系列和iPod Touch中使用的是Safari浏览器,它支持前面介绍的媒体查询表达式.例如,使用iPhone 320px×480px的分辨率去访问我们前面的布局示例,却无法得到我们想看 ...
- SpringMVC的工作流程?Mybatis和hibernate区别?
SpringMVC的工作流程?1. 用户发送请求至前端控制器DispatcherServlet2. DispatcherServlet收到请求调用HandlerMapping处理器映射器.3. 处理器 ...
- netcore 2.2 使用 AutoMapper 实现实体之间映射
一.什么是AutoMapper? AutoMapper是一个简单的对象映射框架(OOM),将一个对象映射到另一个对象. 二.AutoMapper的好处 以前的时候我们将DTO对象转换为Model对象时 ...
- C#中的时间戳
来源:https://blog.guoqianfan.com/2019/11/24/timestamp-in-csharp/ 什么是时间戳 时间戳默认是Unix时间戳. 首先要清楚JavaScript ...
- GitLab基本设置-新增用户
场景 Docker Compose部署GitLab服务,搭建自己的代码托管平台(图文教程): https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/det ...
- English: Class words
filing cabinet pan drive penalty charge per annum light setting remote control
- dedecmsV5.7 任意文件上传漏洞修复
问题文件:在/include/dialog/select_soft_post.php文件 解决方法: 先找到这个文件/include/dialog/select_soft_post.php,找到大概7 ...
- LeetCode刷题191123
博主渣渣一枚,刷刷leetcode给自己瞅瞅,大神们由更好方法还望不吝赐教.题目及解法来自于力扣(LeetCode),传送门. 算法: 给出一个区间的集合,请合并所有重叠的区间. 示例 1: 输入: ...
- docker可视化工具Portainer部署与汉化
为了更好的观察Docker运行状态,我们采用Portainer工具进行可视化,下面是部署过程总结: 环境: Liunx:CentOS Linux release 7.6.1810 (Core) Doc ...