VUE-插件 vue-router vuex

什么是前端路由

什么是路由？
通俗的讲就是网址。
专业一点，就是每次GET或者POST等请求在服务器端有一个专门的正则配置列表，然后匹配到具体一条路径后，
分发到不同的Controller，进行各种操作，最终将html或者数据返回给前端，这就完成了一次IO。
目前绝大多数网站都是这种后端路由，也就是多页面的，这样的好处有很多。
比如页面可以在服务器端渲染好了直接放回给浏览器，不用等待前端加载js和CSS就可以直接显示网页内容，
再比如对SEO的友好等。
缺点：模板是由后端来维护和改写的，前端开发者需要安装一整套后端服务，
必要时还要学习像PHP或JAVA这些非前端语言来改写html结构，
所以html和数据，逻辑混为一谈，维护起来既臃肿，又麻烦。

前后端分离的模式：
后端只提供API来返回数据，前端通过AJAX获取数据后，在通过一定的方式渲染到页面里，这么做的优点是前后端做得事很清楚，后端专注在数据上，前端专注在交互和可视化上。缺点是：首屏时间长。
到底怎么样才算是单页面富应用呢？就是在前后端分离的基础上，加一层前端路由。
实现前端路由的方式？

1. 利用url的hash，就是常说的锚点（#），JavaScript通过hashChange事件来监听url的改变，IE7及以下需要轮询；
2. 另一种就是HTML5的History模式，他使url看起来像普通网站那样，以"/"分割，但没有#，但页面没有跳转，不不过使用这种方式需要服务器端支持，服务器端在收到所有的请求后，都指向同一个html文件，不然会出现404.
   前端路由的优点
   比如页面的持久性，像大部分音乐网站，你都可以播放歌曲的同时跳转到别的页面，而音乐没有中断。再比如前后端彻底分离。

vue-router的基本用法
安装完毕后，在mian.js使用VUE.use（）来加载插件。
在配置的Routers里的每一项的path属性就是指定当前匹配的路径，component是映射的组件。
webpack会把每一个路由都打包成一个js文件，在请求到该页面时，才去加载这个页面的js，也就是异步实现懒加载（按需加载）。
最后在根实例app.vue里添加一个路由视图router-view来挂载所有的路由组件
router-view会根据当前理由动态渲染不同的页面组件，路由切换时，切换的是router-view挂载的组件，其他的内容不会变化。

使用this.$route可以访问到当前路由的很多信息

跳转

1. vue-router有两种跳转页面的方法，第一种是使用内置的router-link标签，他会被渲染成一个a标签。
2. 使用router实例的方法，this.$router.push(’/user/123’);

VUEX

首先通过NPM安装Vuex，在main.js里，通过Vue.use()使用Vuex；
为每个页面创建vuex仓库

const stroe = new Vuex.Store({
   // vuex的配置
});

仓库store包含了应用的数据和操作过程。vuex里的数据都是响应式的，任何组件使用同一store的数据时，只要store的数据变化，对应的组件也会立即更新。
在交行手机银行4.0的项目中，vuex存储了用户登录的信息，如Msessionid，客户号等。在登录时，登录的页面通过调用Dispatch的方法来触发了，vuex里的action的方法，action的方法里又通过commit的方法调取mutations里的方法，mutations里的方法会去异步的从sessionStorage取得用户在登录时存放的用户信息，使用promise的函数保证了在请求完毕后再更新vuex里store里的数据，然后将数据放到vuex的getter里，方便其他页面调用。使用this.$store.getter.userInfo。