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.效果图