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';
// 環(huán)境的切換
// 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 => {
    //請求之前(可以設(shè)置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 => {
    //數(shù)據(jù)拿到之后
    return response.data;
  },
  error => {
    Toast("Http請求失敗，請聯(lián)系管理員");
    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" 
};

其他頁面調(diào)用

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: '發(fā)布表單',
      }
    }
  },
  {
    path: "/releaseform/probationfull",
    name: "ProbationFull",
    component: ProbationFull,
    meta: {
      metaInfo: {
        title: '試用期轉(zhuǎn)正',
      }
    }
  },
  {
    path: "/releaseform/lookapproval",
    name: "LookApproval",
    component: LookApproval,
    meta: {
      metaInfo: {
        title: '試用期轉(zhuǎn)正申請-審批流程',
      }
    }
  },
  {
    path: "/mysubmission",
    name: "mySubmission",
    component: mySubmission,
    meta: {
      metaInfo: {
        title: '我提交的',
      }
    }
  },
  {
    path: "/mysubmission/formdetails",
    name: "formDetails",
    component: formDetails,
    meta: {
      metaInfo: {
        title: '試用期轉(zhuǎn)正申請',
      }
    }
  },
  {
    path: "/mysubmission/mylookapproval",
    name: "myLookApproval",
    component: myLookApproval,
    meta: {
      metaInfo: {
        title: '試用期轉(zhuǎn)正申請-審批流程',
      }
    }
  },
  {
    path: "/nomatters",
    name: "noMatters",
    component: noMatters,
    meta: {
      metaInfo: {
        title: '待辦事宜',
      }
    }
  },
  {
    path: "/nomatters/noformdetails",
    name: "noFormDetails",
    component: noFormDetails,
    meta: {
      metaInfo: {
        title: '試用期轉(zhuǎn)正申請',
      }
    }
  },
  {
    path: "/nomatters/transfer",
    name: "transfer",
    component: transfer,
    meta: {
      metaInfo: {
        title: '試用期轉(zhuǎn)正申請-轉(zhuǎn)審',
      }
    }
  },
  {
    path: "/okmatters",
    name: "okMatters",
    component: okMatters,
    meta: {
      metaInfo: {
        title: '已辦事宜',
      }
    }
  },
  {
    path: "/okmatters/okformdetails",
    name: "okFormDetails",
    component: okFormDetails,
    meta: {
      metaInfo: {
        title: '試用期轉(zhuǎn)正申請',
      }
    }
  },
];

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


// 注冊路由導(dǎo)航鉤子
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} // 將要跳轉(zhuǎn)路由的path作為參數(shù)，傳遞到登錄頁面
      })
    }
  }

  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

還有參考的網(wǎng)址
http://www.itdecent.cn/p/cac8e979e437