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