前面记录了如何进行router页面跳转，接下来记录下页面跳转后数据获取如何实现（使用axios进行后台接口调用）

1.接口调用使用的是axios，我使用的是vue2,所以需要安装适配的版本 "^1.6.8",

npm install axios@1.6.8

2.封装requset.js

import axios from 'axios'
import { MessageBox } from 'element-ui';
 
//配置全局数据请求类型
axios.defaults.headers['Content-Type'] = "application/json;charset=utf-8";
 
//自定义实例
const service = axios.create({
	baseURL: "http://192.168.250.110:8002/api/NewScreenAPI",				//数据请求地址
	timeout: 30 * 1000
})
 
// //配置加载参数(暂时注释)
// let loadingOption = {
// 	text: "正在努力加载中...",
// 	background: "rgba(0, 0, 0, .5)"
// }, loading;
 
//请求拦截器
service.interceptors.request.use(config => {
	// //开始加载
	// loading = Loading.service(loadingOption);
	//数据转换
	config.data = 'object'===typeof config.data ? JSON.stringify(config.data) : config.data;
	//追加访问令牌
	//config.headers['authtoken'] = store.getters.authtoken;
	return config;
}, error => {
	//loading.close();
	// 弹出错误提示
	const errorMessage = error.message || '网络请求发生未知错误';
	MessageBox.error(errorMessage);
	return Promise.reject(error);
});

//响应拦截器
service.interceptors.response.use(response => {
	//loading.close();
	if (response.status == 200) {
		return response['data'];
	}
	return Promise.reject(response);
}, error => {
	//loading.close();
	// 弹出错误提示
	const errorMessage = error.message || '网络请求发生未知错误';
	MessageBox.error(errorMessage);
	return Promise.reject(error);
});

export default service;

3.引入request.js(在main.js中)

import request from './request.js'
Vue.prototype.$http = request;

4.调用

this.$http.get(“接口地址”)
        .then(response => {
          const newProjectInfos = response.data;
          // 比较新获取的数据与当前数据是否相同
          if (!this.$isEqual(currentProjectInfos, newProjectInfos)) {
            this.projectInfos = newProjectInfos;
          }
        })
        .catch(error => {
          console.log('API 1 error:', error);
        });