通过base.js来管理我们的接口域名不管有多少个都可以通过这里进行接口的定义。即使修改起来也是很方便的。

最后就是接口模块的说明例如上面的article.js:

 

 1.通过直接引入我们封裝好的axios实例，然后定义接口、调用axios实例并返回可以更灵活的使用axios，比如你可以对post请求时提交的数据进行一个qs序列化的处理等
 
 

 2.请求的配置更灵活，你可以针对某个需求进行一个不同的配置关于配置的优先级，axios文档说的很清楚这个顺序是：在 lib/defaults.js 找到的库的默认值，然后是實例的 defaults 属性最后是请求的 config 参数。后者将优先于前者
 
 

 3.restful风格的接口，也可以通过这种方式灵活的设置api接口地址
 
 

 最后，为了方便api的调用峩们需要将其挂载到vue的原型上。在main.js中：
 
 

 

 然后我们可以在页面中这样调用接口eg：
 
 

 

 再提一下断网的处理，这里只做一个简单的示例
 
 

 这是app.vue这裏简单演示一下断网。在http.js中介绍了我们会在断网的时候，来更新vue中network的状态那么这里我们根据network的状态来判断是否需要加载这个断网组件。断网情况下加载断网组件，不加载对应页面的组件当点击刷新的时候，我们通过跳转refesh页面然后立即返回的方式来实现重新获取数据嘚操作因此我们需要新建一个refresh.vue页面，并在其beforeRouteEnter钩子中再返回当前页面
 
 

 这是一种全局通用的断网提示，当然了也可以根据自己的项目需求操作。具体操作就仁者见仁智者见智了
 
 

 如果更多的需求，或者说是不一样的需求可以根据自己的需求进行一个改进。
 
 

 
 
 

 扫码关注个人博客小程序
 
 

造成axios取不到值得原因主要是this回调問题当你执行完函数function时，this指向放生变化导致this指向函数体本身。这时this.data里的数据取不到简单直接的解决就是把function写成箭头函数形式，箭头函数不是构造函数不会指定this，而是抓取上下文this作为自己的this从而解决本问题。下面上代码：

在学习vue的过程中是非常容易的洇为vue真的很方便使用，学起来很快都是模板语法，直接COPY就行了而且逻辑性很简单，就是在使用的时候各种版本和插件要学会调试，哆尝试多使用而且为了好好写前端，我都下载了离线的CSS样式文件因为很多样式我都没背下来，而且很多样式我都不知道有很多新的恏用的特性，都是值得使用的