vue2(五)

一、axios基本用法的改善

组件内每一次使用axios都要导入axios然后才能使用axios中的方法

因为每一个.vue组件都是一个vue的实例，可以在main.js中导入axios，把axios挂载在vue的原型上并配置请求根路径，这样vue构造函数上有一个axios自定义属性，如下图


然后在每个组件中就不用每次都要导入axios了，直接访问this.axios。（自定义属性不一定得叫axios规范写法是$http）

如果在每个组件中都要引入根路径的链接，当这个链接发生改变的时候，就要每个组件都要修改路径链接十分麻烦，为了解决这个问题，可如上图在main.js文件中使用这一句来全局配置请求根路径，然后把链接复制到后面，然后下面的每个组件就不用写完整根路径而是后半部分的‘api/get’即可。

把axios挂载在vue的原型的缺点
它无法实现API接口的复用，就是如果每个组件都要调用这个api的话每个组件都要重新写一遍。

二、路由

2.1 前端路由的概念与原理

什么是路由，路由通俗来讲就是对应关系
SPA 与前端路由
SPA 指的是一个 web 网站只有唯一的一个 HTML 页面，所有组件的展示与切换都在这唯一的一个页面内完成。此时，不同组件之间的切换需要通过前端路由来实现。
结论：在 SPA 项目中，不同功能之间的切换，要依赖于前端路由来完成！如下图，不同的地址会展示不同的组件，点击下方四个功能会切换不同的页面，同时地址也会变化。（#号为锚链接，不会产生页面刷新，但是会有浏览历史，前进后退可以看历史。）

什么是前端路由
通俗易懂的概念：Hash 地址与组件之间的对应关系。（就是说在URL地址中#往后都是hash地址。）

2.2 前端路由的工作方式

①用户点击了页面上的路由链接（实际上就是a链接）
②导致了 URL 地址栏中的 Hash 值发生了变化
③前端路由监听了到 Hash 地址的变化
④前端路由把当前 Hash 地址对应的组件渲染都浏览器中。

结论：前端路由，指的是 Hash （path）地址与组件（component）之间的对应关系！

简易路由原理
用到了window对象的onhashchange事件，一旦组件被创建就触发这个事件，然后