### 路由
-------
#### 路由原理
* 传统开发方式 url改变后 立刻发起请求，响应整个页面，渲染整个页面
* SPA锚点值改变后 不会发起请求，发起ajax请求，局部改变页面数据
* 页面不跳转 用户体验更好
#### SPA
* single page application(单页应用程序)
* 前端路由
* 锚点值监视
* ajax获取动态数据
* 核心点是锚点值
* 前端框架 Vue/angular/react都很适合单页应用
#### 基本使用
* vue-router
* 其是vue的核心插件
* 1：下载 `npm i vue-router -S`
* 1.2(重要)：安装插件`Vue.use(VueRouter);`
* 2：在main.js中引入vue-router对象 `import VueRouter form'./x.js';`
* 3：创建路由对象 `var router=new VueRouter();`
* 4：配置路由规则 `router.addRouter([路由对象]);`
* 5：将配置好的路由对象交给Vue
* 在options中传递->key叫做router
* 6：留坑(使用组件)`
#### router-link
* to
* 帮助我们生成a标签的href
* 锚点值代码维护不方便，如果需要改变锚点值名称
* 则需要改变[使用次数+1(配置规则)个地方的代码]
#### 命名路由
* 1：给路由对象一个名称 `{name:'home',path:'/home',component:Home}`
* 2：在router-link的to属性中描述这个规则
* `
* 通过名称找路由对象，获取其path，生成自己的href
* 大大降低维护成本，锚点值改变自用在main.js中改变path属性即可
#### 阶段总结
* vue-router使用步骤 ：
* 1：引入
* 2：安装插件
* 3：创建路由实例
* 4：配置路由规则
* 5：将路由对象关联vue
* 6：留坑
* router-link to="/xxx" 命名路由
* 1.在路由规则对象中 加入name属性
2.在router-link中 :to="{name:"xxx"}"
* 生僻API梳理
* 1.Vue.use(插件对象); //过程中会注册一些全局组件，及给vm或者组件对象挂在属性
* 2.给vm及组件对象挂在的方式：Object.defineProperty(Vue.prototype,'$router',{
* get:function(){
return 自己的router对象；
}
});
#### 参数router-link
* `Vue.prototype.xxx={add:fn}`
* 所有组件中，使用this.xxx就能拿到这个对象
* 查询字符串
* 1：配置`:to="{name:'detail',query:{id:hero.id}}"`
* 2：规则`{name:'detail',path:'/detail',component:Detail}`
* 3：获取`this.$router.query.id`
* 4：生成``
* path方式
* 4：生成``
* 1：配置`:to="{name:'detail',path:'/detail/:id'}"`
* 2：规则`{name:'detail',path:'detail/:id'}`
* 3：获取`this.$route.params.id`
* 查询字符串配置参数
* router-link 一次
* 获取的时候 一次
* path方式配置参数
* router-link 一次
*规则配置的时候声明位置
*获取的时候一次
*总结书写代码注意事项
*path方式需要在路由规则中声明位置
#### vue-router中的对象
* $route 路由信息对象，只读对象
* $router 路由操作对象，只写对象
#### 嵌套路由
* 市面上所谓的用单页面框架开发多页应用
* 嵌套路由
* 案例
*进入我的主页显示：电影、歌曲
*代码思想
*1：router-view的细分
* router-view第一层中，包含一个router-view
* 2：每一个坑挖好了，要对应单独的组件
* 使用须知：1：router-view包含router-view
2：路由children路由
#### 知识点介绍
* 路由meta元数据 -> meta是对路由规则是否需要验证权限的配置
* 路由对象中 和 name属性同级 ```{meta:{isChecked:true}}```
* 路由钩子 -> 权限控制的函数执行时期
* 每次路由匹配后，渲染组件到router-view之前
* ```router.beforeEach(function(to,from,next){})```
### 练习
*1：使用koa 编写一个服务器
*a./log的请求.. ctx.body={msg:'ok'} ```前端用jq发送ajax请求```
*2：客户端接收响应以后.如果是ok. localStoage中保存该值
*3：在全局路由守卫中，区分/login 不验证(meta),/show要验证， 验证条件就是从localStorage中获取
#### 编程导航
*1：跳到指定的锚点，并显示页面```this.$router.push({name:'xxx',query:{id:1},params:{name:'abc'});```
*2：配置规则 ```{name:'xxx',path:'/xxx/:name'}```
*3：根据历史记录，前进或后退
* ```this.$router.go(-1|1);```
* 1代表进一步，-1是退一步
### axios
#### 基本使用
Axios.method('url',[,..data],options)
.then(function(res){})
.catch(function(err){})
#### 合并请求
```js
this.$axios.all([请求1，请求2])
.then(this.$axios.spread(function(res1,res2){
})
)
```
#### 拦截器
-单请求配置options：`axios.post(url,data,options);`
-全局配置defaults:`this.$axios.details`
-config:`请求拦截器中的参数`
-response。config `响应拦截器中的参数`
* options
—— baseURL 基础URL路径
—— params 查询字符串(对象)
—— transformRequest 转换请求体数据
—— headers 头信息
—— data 请求体数据
—— timeout 请求超时，请求多久以后没有响应算是超时(毫秒)
### 模块化
* webpack 命令
npm init -y
npm install [email protected] --save-dev --registry https://registry.npm,taobao.org
* package.json文件
`"script":{
"test":"webpack ./main.js ./build.js"
},`
* 命令行运行 npm run test
#### ES6模块
* 导入和导出只能存在顶级作用域
* require引入是代码执行的时候才加载
* import和export都是提前加载，加载在代码执行之前
#### 箭头函数和function
* 一方面箭头函数是种简写形式
* 应用场景：犹豫箭头函数本身没有this和arguments。通常在事件类的回调函数上，让其上级function绑定this，而非事件对象
* 箭头函数不可以作为构造函数
### ES6函数简写
* 用在对象的属性中
```js
fn3(){//干掉了:function,用在对象的属性中console.log(this);},```