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)

})

<!-- 首页 -->

<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>