1,下载
npm install axios -S
2, qs不用引入
需要引入vant 的弹出框 因为下面用到

http.js文件

import axios from "axios";
import { Toast } from "vant";
import QS from 'qs';
// import router from '../router';
// 环境的切换
// if (process.env.NODE_ENV == 'development') {    
//     axios.defaults.baseURL = 'https://www.baidu.com';} 
// else if (process.env.NODE_ENV == 'debug') {    
//     axios.defaults.baseURL = 'https://www.ceshi.com';
// } 
// else if (process.env.NODE_ENV == 'production') {    
//     axios.defaults.baseURL = 'https://www.production.com';
// }
let localhosts = "http://www.oa.com/v1.0"; //请求的后台域名
axios.interceptors.request.use(
  config => {
    //请求之前(可以设置token)
    // if (localStorage.getItem('token')){  // 判断是否存在token，如果存在的话，则每个http header都加上token
    config.headers.common['Token'] = localStorage.getItem('tokenMobile') || ''
    // }
    return config;
  },
  error => {
    Toast(error);
    return Promise.reject(error);
  }
);
axios.interceptors.response.use(
  response => {
    //数据拿到之后
    return response.data;
  },
  error => {
    Toast("Http请求失败，请联系管理员");
    return Promise.reject(error.response);
  }
);
function successfun(res) {
  //处理后台返回的非200错误
  if (res.code === 0) {
    return res;
  } else {
    Toast(res.message);
    return res;
  }
}
function errorfun(res) {
  if (res.code != 0) {
    Toast(res.message);
    return res;
  }
}
export default {
  post(url, data) {
    //post请求
    return axios({
      method: "post",
      baseURL: localhosts,
      url,
      data: QS.stringify(data),
    }).then(
      res => {
        return successfun(res);
      },
      err => {
        return errorfun(err);
      }
    );
  },
  get(url, params) {
    //get请求
    return axios({
      method: "get",
      baseURL: localhosts,
      url,
      params,
    }).then(
      res => {
        return successfun(res);
      },
      err => {
        return errorfun(err);
      }
    );
  }
};

api.js文件

export default {
  enterprise_wechat_menus: "/enterprise_wechat/menus",
  flow_dev_common: "/flow/dev_common" 
};

其他页面调用

created(){

   this.http.post(this.api.enterprise_wechat_menus)
   .then(res => {
        this.content = res.data
    });
            
 },

作为参考的路由文件router/index.js 脚手架的目录和文件,里面加了拦截器和保存token

import Vue from "vue";
import VueRouter from "vue-router";
import ReleaseForm from "../views/releaseForm/index.vue";
import ProbationFull from "../views/releaseForm/probationFull.vue";
import LookApproval from "../views/releaseForm/lookApproval.vue";

import mySubmission from "../views/mySubmission/index.vue";
import formDetails from "../views/mySubmission/formDetails.vue";
import myLookApproval from "../views/mySubmission/myLookApproval.vue";

import noMatters from "../views/noMatters/index.vue";
import noFormDetails from "../views/noMatters/noFormDetails.vue";
import transfer from "../views/noMatters/transfer.vue";

import okMatters from "../views/okMatters/index.vue";
import okFormDetails from "../views/okMatters/okFormDetails.vue";

Vue.use(VueRouter);

const routes = [
  {
    path: "/releaseform",
    name: "ReleaseForm",
    component: ReleaseForm,
    meta: {
      metaInfo: {
        title: '发布表单',
      }
    }
  },
  {
    path: "/releaseform/probationfull",
    name: "ProbationFull",
    component: ProbationFull,
    meta: {
      metaInfo: {
        title: '试用期转正',
      }
    }
  },
  {
    path: "/releaseform/lookapproval",
    name: "LookApproval",
    component: LookApproval,
    meta: {
      metaInfo: {
        title: '试用期转正申请-审批流程',
      }
    }
  },
  {
    path: "/mysubmission",
    name: "mySubmission",
    component: mySubmission,
    meta: {
      metaInfo: {
        title: '我提交的',
      }
    }
  },
  {
    path: "/mysubmission/formdetails",
    name: "formDetails",
    component: formDetails,
    meta: {
      metaInfo: {
        title: '试用期转正申请',
      }
    }
  },
  {
    path: "/mysubmission/mylookapproval",
    name: "myLookApproval",
    component: myLookApproval,
    meta: {
      metaInfo: {
        title: '试用期转正申请-审批流程',
      }
    }
  },
  {
    path: "/nomatters",
    name: "noMatters",
    component: noMatters,
    meta: {
      metaInfo: {
        title: '待办事宜',
      }
    }
  },
  {
    path: "/nomatters/noformdetails",
    name: "noFormDetails",
    component: noFormDetails,
    meta: {
      metaInfo: {
        title: '试用期转正申请',
      }
    }
  },
  {
    path: "/nomatters/transfer",
    name: "transfer",
    component: transfer,
    meta: {
      metaInfo: {
        title: '试用期转正申请-转审',
      }
    }
  },
  {
    path: "/okmatters",
    name: "okMatters",
    component: okMatters,
    meta: {
      metaInfo: {
        title: '已办事宜',
      }
    }
  },
  {
    path: "/okmatters/okformdetails",
    name: "okFormDetails",
    component: okFormDetails,
    meta: {
      metaInfo: {
        title: '试用期转正申请',
      }
    }
  },
];

const router = new VueRouter({
  mode: "history",
  base: process.env.BASE_URL,
  routes
});


// 注册路由导航钩子
router.beforeEach((to, from, next) => {
  // console.log(localStorage.removeItem('token'),123)
  if(!localStorage.getItem('tokenMobile')){
    if(to.query.token){
      console.log(router.app.$options.store,99)
      router.app.$options.store.commit('showProfile',to.query.state)
      router.app.$options.store.commit('showToken',to.query.token)
      localStorage.setItem('tokenMobile',to.query.token)
      next({
        path: to.query.state,
        //query: {redirect: to.fullPath} // 将要跳转路由的path作为参数，传递到登录页面
      })
    }
  }

  if (to.meta.metaInfo) {
    if(to.meta.metaInfo.title){
      document.title = to.meta.metaInfo.title
    }
  }
  next()
})



export default router;

————————————————
原文链接：https://blog.csdn.net/abez_c/article/details/87186442

还有参考的网址
https://www.jianshu.com/p/cac8e979e437