vue2.0 仿手机新闻站（四）axios

1.axios的配置

main.js

import Vue from 'vue'
import App from './App.vue'
// 引入 路由
import VueRouter from 'vue-router'
// 引入 路由配置文件
import routes from './router.config'
// 引入 vuex入口文件
import store from './store/index'
// 引入 axios
import axios from 'axios'
// 引入 loading 组件
import Loading from './components/loading'

Vue.use(VueRouter);
Vue.use(Loading);

// 关于axios配置
axios.interceptors.request.use(function(config){
	// 发送请求
	store.dispatch('showLoading');
	return config;
},function(error){
	return Promise.reject(error);
});

axios.interceptors.response.use(function(response){
	// 请求回来
	store.dispatch('hideLoading');
	return response;
},function(error){
	return Promise.reject(error);
});

// 配置请求的根路径
// axios.default.baseURL = 'http://localhost:8080';

// 设置默认头部信息 post
// axios.default.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

// 把axios对象挂到Vue原型上
Vue.prototype.$http = axios;

// 创建 路由
const router = new VueRouter({
	mode:'history', // 删除 url 中的'#'号,切换路径模式
	scrollBehavior:() => ({y:0}), // 滚动条滚动的行为,不加这个默认就会记忆原来滚动条的位置
	routes // routes 等价于 routes:routes
});

require('./assets/css/base.css'); // 全局引入

new Vue({
  	el: '#app',
  	router,
  	store,
  	render: h => h(App)
})

 

2. 组件中的使用

Home.vue

<!-- 首页 -->
<template>
	<div id="home">
		<div class="content mt30">
			<div class="newsList">
				<ul>
					<li v-for="(item,index) in arrList">
						<a href="conText.html">
							<h2>{{index}}.{{item.title}}</h2>
							<p>{{item.detail}}</p>
						</a>
					</li>
				</ul>
			</div>
		</div>
	</div>
</template>

<script>
	export default{
		data(){
			return {
				arrList:[]
			}
		},
		mounted(){
			// 获取数据
			this.fetchData();
		},
		methods:{
			fetchData(){
				var _this = this;
				// this 为 vue的实例
				this.$http.get('src/data/index.data').then(function(res){
					_this.arrList = res.data;
				}).catch(function(err){
					console.log('Home',err);
				});
			}
		}
	}
</script>

<style scoped>
	.mt30{
		margin-top: 30px;
	}
</style>

 

3.静态数据

 

4.效果图