复习

• 路由操作的基本步骤

javascript
引入对象
import VueRouter from 'vue-router';
安装插件
Vue.use(VueRouter);挂载属性的行为
创建路由对象
let router=new VueRouter({
    routes:[
        {name:'xxx' path:'/xxx',组件}
    ]
})；
将路由对象放到option中
newVue({
    router
})

• 套步骤
  • 1:去哪里 <router-link :to="{name:'taiyuan'}"></router-link>
  • 2:导航（配置路由规则）{name:'taiyuan' path:'/taiyuan',组件A}
  • 去了干嘛（在组件A内干什么）
    • 在created事件函数中，获取路由参数
    • 发起请求，把数据挂载上去
• 参数
  • 查询字符串（#/taiyuan?id=1&age=2）
    • 1:去哪里 <router-link :to="{name:'taiyuan',query:{id:1,age:2}"></router-link>
    • 2:导航（配置路由规则）{name:'taiyuan' path:'/taiyuan',组件A}
    • 去了干嘛（在组件A内干什么）
      • this.$route.query.id||age
  • path （#/taiyuan/1/2）
    • 1:去哪里 <router-link :to="{name:'taiyuan',params:{id:1,age:2}"></router-link>
    • 2:导航（配置路由规则）{name:'taiyuan' path:'/taiyuan/:id/:age',组件A}
    • 去了干嘛（在组件A内干什么）
      • this.$route.params.id||age
• 编程导航
  • 一个获取信息的只读对象（$route）
  • 一个具备功能函数的对象（$router）
  • 根据浏览器历史记录前进和后退 this.$router.go(1||-1)
  • 跳转到指定路由 this.$router.push({name:'taiyuan'})
• 嵌套路由
  • 让变化的视图(router-view)产生包含关系(router-view)
  • 让路由与router-view关联，并且也产生父子关系
• 多视图
  • 让视图更为灵活，以前放一个，现在可以刚多个，通过配置可以修改
• axios：
  • 开始：
    • 跨域+默认的头 是因为数据格式为对象，所以content-type:application/json
    • 有OPTIONS预检请求（浏览器自动发起）
  • 最终：
    • 当我们调整为字符串数据，引起content-type变为application/x-www-form-urlencoded
    • 没有OPTIONS预检请求
  • 总结：跨域+application/json会引起OPTIONS预检请求，并且自定义一个头(提示服务器，这次的content-type较为特殊)，content-type的值
  • 服务器认为这是一次请求，而没有允许content-type的头
  • 浏览器认为服务器不一定能处理掉这个特殊的头的数据
  • 抛出异常
  • 在node服务器 response.setHeader("Access-Control-Allow-Headers","content-type,多个")
  • formdata的样子：k1=v1&k2=v2
• axios属性关系
  • options：headers、baseURL、params
  • 默认全局设置（）
    • Axios.defaults->options对象
    • 针对个边请求来附加options
    • axios.get(url,options)
    • axios.post(url,data,options)

axios

• 合并请求
• axios.all([请求1,请求2])
• 分发响应 axios.spread(fn)
• fn:对应参数（res）和请求的顺序一致
• 应用场景：
  • 必须保证两次请求都成功，比如，分头获取省、市的数据
• 执行特点：只要又一次失败就算失败，否则成功

拦截器

• 过滤，在每一次请求与响应中，添加行为
• axios.interceptors.request.use(fn)在请求之前执行fn
• fn(config){config.headers={xxx}} config相当于options对象
• 默认设置 defaults 范围广、权力小
• 单个请求的设置options get(url,options) 范围小、权力中
• 拦截器 范围广、权力大

token(扩展)

• cookie和session的机制，cookie自动带一个字符串
• cookie只在浏览器
• 移动端原生应用，也可以使用http协议
  • 1.可以加自定义的头
  • 原生应用没有cookie
• 对于三端来件，token可以作为类似cookie的使用，并且可以通用
• 拦截器可以用在添加token上

拦截器操作loading

• 在请求发起前open
• 在响应回来后close

import Vue from 'vue';
import Axios from 'axios';

//拦截器
Axios.interceptors.request.use(function(config) {
    //请求发起之前  显示loading
    MintUi.Indicator.open();
    return config;
})
Axios.interceptors.response.use(function(config) {
    //响应回来之后 隐藏loading
    MintUi.Indicator.close();
    return config;
})
Vue.prototype.$axios = Axios;

监视 watch

• watch可以对单个变量进行监视，也可以深度监视

watch: {
    a: function (val, oldVal) {
      console.log('new: %s, old: %s', val, oldVal)
    },
    // 方法名
    b: 'someMethod',
    // 深度 watcher
    c: {
      handler: function (val, oldVal) { /* ... */ },
      deep: true
    },

• computed可以监视多个变量，可以指定返回数据，并且可以显示在页面
• watch和computed都是options中的属性
  • watch监视单个
  • computed可以监视多个this相关属性值得改变，如果和原值一样，不会触发函数的调用，并且可以返回对象