在vue cli项目如何在js文件里使用vue实例

在vue cli项目如何在js文件里使用vue实例？今天就给大家分享两种方法实现在vue cli项目中的js文件里使用vue实例。

一、方法一

1、在http.js中：定义一个变量context用来接收vue，再定义一个initContext 方法传入的参数是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; //导出vue实例

2、在需要使用vue实例的js页面中引入

//引入vue实例
import context from '../main.js'
//跳转到登录页
context.$router.push('/login');