復(fù)習(xí)

• 路由操作的基本步驟

javascript
引入對(duì)象
import VueRouter from 'vue-router';
安裝插件
Vue.use(VueRouter);掛載屬性的行為
創(chuàng)建路由對(duì)象
let router=new VueRouter({
    routes:[
        {name:'xxx' path:'/xxx',組件}
    ]
})；
將路由對(duì)象放到option中
newVue({
    router
})

• 套步驟
  • 1:去哪里 <router-link :to="{name:'taiyuan'}"></router-link>
  • 2:導(dǎo)航（配置路由規(guī)則）{name:'taiyuan' path:'/taiyuan',組件A}
  • 去了干嘛（在組件A內(nèi)干什么）
    • 在created事件函數(shù)中，獲取路由參數(shù)
    • 發(fā)起請(qǐng)求，把數(shù)據(jù)掛載上去
• 參數(shù)
  • 查詢字符串（#/taiyuan?id=1&age=2）
    • 1:去哪里 <router-link :to="{name:'taiyuan',query:{id:1,age:2}"></router-link>
    • 2:導(dǎo)航（配置路由規(guī)則）{name:'taiyuan' path:'/taiyuan',組件A}
    • 去了干嘛（在組件A內(nèi)干什么）
      • this.$route.query.id||age
  • path （#/taiyuan/1/2）
    • 1:去哪里 <router-link :to="{name:'taiyuan',params:{id:1,age:2}"></router-link>
    • 2:導(dǎo)航（配置路由規(guī)則）{name:'taiyuan' path:'/taiyuan/:id/:age',組件A}
    • 去了干嘛（在組件A內(nèi)干什么）
      • this.$route.params.id||age
• 編程導(dǎo)航
  • 一個(gè)獲取信息的只讀對(duì)象（$route）
  • 一個(gè)具備功能函數(shù)的對(duì)象（$router）
  • 根據(jù)瀏覽器歷史記錄前進(jìn)和后退 this.$router.go(1||-1)
  • 跳轉(zhuǎn)到指定路由 this.$router.push({name:'taiyuan'})
• 嵌套路由
  • 讓變化的視圖(router-view)產(chǎn)生包含關(guān)系(router-view)
  • 讓路由與router-view關(guān)聯(lián)，并且也產(chǎn)生父子關(guān)系
• 多視圖
  • 讓視圖更為靈活，以前放一個(gè)，現(xiàn)在可以剛多個(gè)，通過配置可以修改
• axios：
  • 開始：
    • 跨域+默認(rèn)的頭 是因?yàn)閿?shù)據(jù)格式為對(duì)象，所以content-type:application/json
    • 有OPTIONS預(yù)檢請(qǐng)求（瀏覽器自動(dòng)發(fā)起）
  • 最終：
    • 當(dāng)我們調(diào)整為字符串?dāng)?shù)據(jù)，引起content-type變?yōu)閍pplication/x-www-form-urlencoded
    • 沒有OPTIONS預(yù)檢請(qǐng)求
  • 總結(jié)：跨域+application/json會(huì)引起OPTIONS預(yù)檢請(qǐng)求，并且自定義一個(gè)頭(提示服務(wù)器，這次的content-type較為特殊)，content-type的值
  • 服務(wù)器認(rèn)為這是一次請(qǐng)求，而沒有允許content-type的頭
  • 瀏覽器認(rèn)為服務(wù)器不一定能處理掉這個(gè)特殊的頭的數(shù)據(jù)
  • 拋出異常
  • 在node服務(wù)器 response.setHeader("Access-Control-Allow-Headers","content-type,多個(gè)")
  • formdata的樣子：k1=v1&k2=v2
• axios屬性關(guān)系
  • options：headers、baseURL、params
  • 默認(rèn)全局設(shè)置（）
    • Axios.defaults->options對(duì)象
    • 針對(duì)個(gè)邊請(qǐng)求來附加options
    • axios.get(url,options)
    • axios.post(url,data,options)

axios

• 合并請(qǐng)求
• axios.all([請(qǐng)求1,請(qǐng)求2])
• 分發(fā)響應(yīng) axios.spread(fn)
• fn:對(duì)應(yīng)參數(shù)（res）和請(qǐng)求的順序一致
• 應(yīng)用場(chǎng)景：
  • 必須保證兩次請(qǐng)求都成功，比如，分頭獲取省、市的數(shù)據(jù)
• 執(zhí)行特點(diǎn)：只要又一次失敗就算失敗，否則成功

攔截器

• 過濾，在每一次請(qǐng)求與響應(yīng)中，添加行為
• axios.interceptors.request.use(fn)在請(qǐng)求之前執(zhí)行fn
• fn(config){config.headers={xxx}} config相當(dāng)于options對(duì)象
• 默認(rèn)設(shè)置 defaults 范圍廣、權(quán)力小
• 單個(gè)請(qǐng)求的設(shè)置options get(url,options) 范圍小、權(quán)力中
• 攔截器 范圍廣、權(quán)力大

token(擴(kuò)展)

• cookie和session的機(jī)制，cookie自動(dòng)帶一個(gè)字符串
• cookie只在瀏覽器
• 移動(dòng)端原生應(yīng)用，也可以使用http協(xié)議
  • 1.可以加自定義的頭
  • 原生應(yīng)用沒有cookie
• 對(duì)于三端來件，token可以作為類似cookie的使用，并且可以通用
• 攔截器可以用在添加token上

攔截器操作loading

• 在請(qǐng)求發(fā)起前open
• 在響應(yīng)回來后close

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

//攔截器
Axios.interceptors.request.use(function(config) {
    //請(qǐng)求發(fā)起之前  顯示loading
    MintUi.Indicator.open();
    return config;
})
Axios.interceptors.response.use(function(config) {
    //響應(yīng)回來之后 隱藏loading
    MintUi.Indicator.close();
    return config;
})
Vue.prototype.$axios = Axios;

監(jiān)視 watch

• watch可以對(duì)單個(gè)變量進(jìn)行監(jiān)視，也可以深度監(jiān)視

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

• computed可以監(jiān)視多個(gè)變量，可以指定返回?cái)?shù)據(jù)，并且可以顯示在頁面
• watch和computed都是options中的屬性
  • watch監(jiān)視單個(gè)
  • computed可以監(jiān)視多個(gè)this相關(guān)屬性值得改變，如果和原值一樣，不會(huì)觸發(fā)函數(shù)的調(diào)用，并且可以返回對(duì)象