前端总结——Vuex与Vue-router
Vuex是一个专为 Vue.js 应用程序开发的状态管理模式 + 库。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
1. vuex是什么
- 它采用集中式存储管理应用的所有组件的状态，而更改状态的唯一方法是提交mutation。
- 多个组件依赖于同一状态时，对于多层嵌套的组件的传参将会非常繁琐，并且对于兄弟组件间的状态传递无能为力。
- 来自不同组件的行为需要变更同一状态。以往采用父子组件直接引用或者通过事件来变更和同步状态的多份拷贝。以上的这些模式非常脆弱，通常会导致无法维护的代码。
2. vuex的5个核心属性
- state、getters、mutations、actions、modules
state：存储数据，存储状态；在根实例中注册了store 后，用 this.$store.state 来访问；对应vue里面的data；存放数据方式为响应式，vue组件从store中读取数据，如数据发生变化，组件也会对应的更新。getter：可以认为是 store 的计算属性，它的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。mutation：更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。action：包含任意异步操作，通过提交 mutation 间接更变状态。module：将 store 分割成模块，每个模块都具有state、mutation、action、getter、甚至是嵌套子模块。
3. vuex的数据传递流程
当组件进行数据修改的时候我们需要调用dispatch来触发actions里面的方法。actions里面的每个方法中都会有一个commit方法，当方法执行的时候会通过commit来触发mutations里面的方法进行数据的修改。mutations里面的每个函数都会有一个state参数，这样就可以在mutations里面进行state的数据修改，当数据修改完毕后，会传导给页面。页面的数据也会发生改变。
4. Vuex中action和mutation有什么区别？
- action 提交的是 mutation，而不是直接变更状态。mutation可以直接变更状态。
- action 可以包含任意异步操作。mutation只能是同步操作。提交方式不同，action 是用
this.$store.dispatch('ACTION_NAME',data)来提交。mutation是用this.$store.commit('SET_NUMBER',10)来提交。 - 接收参数不同，mutation第一个参数是state，而action第一个参数是context，其包含了state、rootState、commit、dispatch、getters、rootGetters。
vue-router 路由模式有几种？（页面跳转）
1、vue-router 有三种路由模式：hash、history、abstract
2、三种路由模式的说明如下：
1). hash: 使用 URL hash 值来作路由。支持所有浏览器，包括不支持 HTML5 History Api 的浏览器；
2). history : 依赖 HTML5 History API 和服务器配置。具体可以查看 HTML5 History 模式；
3). abstract : 支持所有 JavaScript 运行环境，如 Node.js 服务器端。如果发现没有浏览器的 API，路由会自动强制进入abstract模式.
两种方式实现前端路由
-
hash
- hash 是 URL 中 hash (就是#号) 及后面的那部分，常用作锚点在页面内进行导航，改变 URL 中的 hash 部分不会引起页面刷新
- **原理：**通过
hashchange事件（原理）监听 URL 的变化。改变 URL 的方式只有这几种：- 通过浏览器前进后退改变 URL
- 通过标签改变 URL
- 通过window.location改变URL
- 这几种情况改变 URL 都会触发
hashchange事件
2、history：hash中的hashchange只能改变#后面的url片段，而 history api则更灵活和更全面
-
history api可以分为两大部分：切换和修改
1）切换历史状态：包括back、forward、go三个方法，对应浏览器的前进，后退，跳转操作
2）修改历史状态：包括了pushState、replaceState两个方法，这两个方法改变 URL 的 path 部分不会引起页面刷新，这两个方法接收三个参数：stateObj，title，url -
history 提供
popstate事件，实现路由拦截，监听页面返回事件- 通过浏览器前进后退改变 URL 时会触发
popstate事件， - 通过pushState/replaceState或标签改变 URL 不会触发
popstate事件。
- 通过浏览器前进后退改变 URL 时会触发
-
可以拦截 pushState/replaceState的调用和标签的点击事件来检测 URL 变化，所以监听 URL 变化可以实现，只是没有 hashchange 那么方便。
vue-router 中 hash 和 history 路由模式实现跳转的原理
vue-router路由的原理是通过改变网址来实现页面的局部刷新，相比a标签跳转的不同之处在于路由跳转不需要刷新整个页面。流程:
1、浏览器发出请求
2、服务器监听到端口有请求过来，并解析url路径
3、根据服务器的路由配置，返回相应的信息(可以是HTML字符串、也可以是json数据、图片等等)
4、浏览器根据数据包的 Content-type 来决定如何解析数据
路由就是用来跟后端服务器进行交互的一种方式，通过不同的路径，来请求不同的资源，请求不同的页面是路由的其中一种功能。
1. hash 模式的实现原理
1). 早期前端路由的实现就是基于 location.hash 来实现的。location.hash 的值就是 URL 中 # 后面的内容。比如http://www.atguigu.com/#/search，它的 location.hash 的值为 ‘#/search’：
2). hash 路由模式的实现主要是基于下面几个特性：
● URL 中 hash 值只是客户端的一种状态，也就是说当向服务器端发出请求时，hash 部分不会被发送；
● hash 值的改变，都会在浏览器的访问历史中增加一个记录。因此我们能通过浏览器的回退、前进按钮控制hash 的切换；
● 可以通过 a 标签，并设置 href 属性，当用户点击这个标签后，URL 的 hash 值会发生改变；或者使用 JavaScript 来对 loaction.hash 进行赋值，改变 URL 的 hash 值；
● 我们可以使用 hashchange 事件来监听 hash 值的变化，从而进行路由跳转。
2、history 模式的实现原理
1). HTML5 提供了 History API 来实现 URL 的变化。其中做最主要的 API 有以下两个：history.pushState() 和 history.repalceState()。这两个 API 可以在不进行刷新的情况下，操作浏览器的历史纪录。唯一不同的是，前者是新增一个历史记录，后者是直接替换当前的历史记录，如下所示：
window.history.pushState(null, null, path);
window.history.replaceState(null, null, path);
2). history 路由模式的实现主要基于存在下面几个特性：
● pushState 和 repalceState 两个 API 来操作实现 URL 的变化 ；
● 我们可以使用 popstate 事件来监听 url 的变化，从而进行路由跳转；
● history.pushState() 、 history.replaceState() 、标签改变 URL 不会触发 popstate 事件，这时我们需要手动触发路由跳转。 通过浏览器前进后退改变 URL 时会触发 popstate 事件，
3).要实现一个完整的路由跳转，会经过如下路径：
history.transition() -> history.confirmTransition() ->history.update(route)->app._route=route
其中当app._route=route此时会触发vue组件的re-render
route和router的区别
1、$router是VueRouter的实例，包含了路由跳转的方法、钩子函数等。
2、$route 是路由信息对象，每一个路由都会有一个route对象，包含path,params,hash,query,fullPath,matched,name等路由信息属性。
前端路由和服务端路由的区别
1）服务端路由：每跳转到不同的URL，都是重新访问服务端，然后服务端返回页面，页面也可以是服务端获取数据，然后和模板组合，返回HTML，也可以是直接返回模板HTML，然后由前端 JS 再去请求数据，使用前端模板和数据进行组合，生成想要的HTML。
2）前端路由：每跳转到不同的URL都是使用前端的锚点路由，实际上只是 JS 根据URL来操作DOM元素，根据每个页面需要的去服务端请求数据，返回数据后和模板进行组合，当然模板有可能是请求服务端返回的，这就是 SPA 单页程序。