vue的router和axios

一、什麼是vue-router

是路由插件，單頁面應用路徑管理器，是將路徑和組件建立映射關係

二、模式

hash：（默認）錨點（#）就是在路徑上會有#，改變#後面的內容會顯示對應的dom
history：需要聲明（mode：history）路徑上沒有#

hash：有#號，微信分享頁面就會把"#"後邊的內容處理掉，和微信支付不適合，或路由加base："./dist"

history:需要後端配置返回同一個index.html，不能返回404,不然會導致空白頁面，404頁面由前端配置

三、實例

import Vue from 'vue'
import Router from 'vue-router'
import { resolve } from 'path';
/* import Login from '@/pages/login/login'
import Main from '@/pages/main/main'
import Cbgn from '@/pages/chaobiao/cbgn/cbgn'
import Dagl from '@/pages/chaobiao/dagl/dagl'
import Ftgl from '@/pages/chaobiao/ftgl/ftgl'
import Nhtjfx from '@/pages/nhtj/nhtjfx/nhtjfx'
import Pdxtjc from '@/pages/zxjc/pdxtjc'
import Nhdb from '@/pages/nhdb/nhdb'
import Cbhz from '@/pages/cbgl/cbhz'
import Dqyxfx from '@/pages/yxfx/dqyxfx/dqyxfx'
import Gsbcz from '@/pages/xtgl/gsbcz/gsbcz'
import Byqcz from '@/pages/xtgl/byqcz/byqcz'
import Bmcz from '@/pages/xtgl/bmcz/bmcz'
import Bmyjldcz from '@/pages/xtgl/Bmyjldcz/Bmyjldcz'
import Jldcz from '@/pages/xtgl/Jldcz/Jldcz'
import Gjlxcz from '@/pages/xtgl/gjlxcz/gjlxcz'
import Gjpzbcz from '@/pages/xtgl/gjpzbcz/gjpzbcz'
import Cdbcz from '@/pages/xtgl/cdbcz/cdbcz'
import Jsbcz from '@/pages/xtgl/jsbcz/jsbcz'
import Yhbcz from '@/pages/xtgl/yhbcz/yhbcz'
import Jsycdcz from '@/pages/xtgl/jsycdcz/jsycdcz'
import Yhxxcz from '@/pages/xtgl/yhxxcz/yhxxcz'
import Yhyjscz from '@/pages/xtgl/yhyjscz/yhyjscz' */
Vue.use(Router)

function findNav_(navArr,nav){
  for(let i=0;i<navArr.length;i++){
    if(navArr[i].children.length != 0){//存在子菜單
      if(navArr[i].url != "一級菜單"){
        nav.push({
          path:navArr[i].path,
          name:navArr[i].name,
          component:resolve=>require(["@/pages/"+navArr[i].url],resolve),
          children:[]
        })
      }
      findNav_(navArr[i].children,nav);
    }else{//不存在子菜單
      nav.push({
        path:navArr[i].path,
        name:navArr[i].name,
        component:resolve=>require(["@/pages/"+navArr[i].url],resolve),
      });
    }
  }
}

export default new Router({
/* routes: [
    {path: '/',name: 'Login',component: Login},
    {path: '/Main',name: 'Main',component: Main},
    {path: '/Cbgn',name: 'Cbgn',component: Cbgn},
    {path: '/Dagl',name: 'Dagl',component: Dagl},
    {path: '/Ftgl',name: 'Ftgl',component: Ftgl},
    {path: '/Pdxtjc',name: 'Pdxtjc',component: Pdxtjc},
    {path: '/Nhtjfx',name: 'Nhtjfx',component: Nhtjfx},
    {path: '/Nhdb',name: 'Nhdb',component: Nhdb},
    {path: '/Cbhz',name: 'Cbhz',component: Cbhz},
    {path: '/Dqyxfx',name: 'Dqyxfx',component: Dqyxfx},
    {path: '/Gsbcz',name: 'Gsbcz',component: Gsbcz},
    {path: '/Byqcz',name: 'Byqcz',component: Byqcz},
    {path: '/Bmcz',name: 'Bmcz',component: Bmcz},
    {path: '/Bmyjldcz',name: 'Bmyjldcz',component: Bmyjldcz},
    {path: '/Jldcz',name: 'Jldcz',component: Jldcz},
    {path: '/Gjlxcz',name: 'Gjlxcz',component: Gjlxcz},
    {path: '/Gjpzbcz',name: 'Gjpzbcz',component: Gjpzbcz},
    {path: '/Cdbcz',name: 'Cdbcz',component: Cdbcz},
    {path: '/Jsbcz',name: 'Jsbcz',component: Jsbcz},
    {path: '/Yhbcz',name: 'Yhbcz',component: Yhbcz},
    {path: '/Jsycdcz',name: 'Jsycdcz',component: Jsycdcz},
    {path: '/Yhxxcz',name: 'Yhxxcz',component: Yhxxcz},
    {path: '/Yhyjscz',name: 'Yhyjscz',component: Yhyjscz},
  ] */
 routes: (()=>{
    let navArr=[{
        "path": "/Main",
        "url":"main/main",
        "title": "首頁",
        "name":"Main",
        "children":[]
      },{
          "path": "/Dqyxfx",
          "url":"一級菜單",
          "name":"Dqyxfx",
          "title": "電氣運行分析",
          "children":[{
              "path":"/Dqyxfx",
              "url":"yxfx/dqyxfx/dqyxfx",
              "name":"Dqyxfx",
              "title": "電氣運行分析",
              "children":[]
          }]
      },{
          "path": "/Cbgl",
          "url":"一級菜單",
          "name":"Cbgl",
          "title": "抄表管理",
          "children": [{
              "path": "/Cbgn",
              "url":"chaobiao/cbgn/cbgn",
              "name":"Cbgn",
              "title": "抄表管理",
              "children":[]
          },{
            "path": "/Ftgl",
            "url":"chaobiao/ftgl/ftgl",
            "name":"Ftgl",
            "title": "分攤管理",
            "children":[]
        }]
      },{
          "path": "/Nhtj",
          "url":"一級菜單",
          "name":"Nhtj",
          "title": "能耗統計",
          "children": [{
              "path": "/Nhtjfx",
              "name":"Nhtjfx",
              "url":"nhtj/nhtjfx/nhtjfx",
              "title": "能耗統計分析",
              "children":[]
          }]
      },{
          "path": "/Xtgl",
          "title": "系統管理",
          "url":"一級菜單",
          "name":"Xtgl",
          "children": [{
              "path": "/Yhbcz",
              "url":"xtgl/yhbcz/yhbcz",
              "title": "用戶管理",
              "name":"Yhbcz",
              "children":[]
          },{
            "path": "/Gsbcz",
            "url":"xtgl/gsbcz/gsbcz",
            "title": "單位管理",
            "name":"Gsbcz",
            "children":[]
          },{
            "path": "/Jsbcz",
            "url":"xtgl/jsbcz/jsbcz",
            "title": "角色管理",
            "name":"Jsbcz",
            "children":[]
          },{
            "path": "/Cdbcz",
            "url":"xtgl/cdbcz/cdbcz",
            "title": "菜單管理",
            "name":"Cdbcz",
            "children":[]
          },{
            "path": "/Yhxxcz",
            "url":"xtgl/yhxxcz/yhxxcz",
            "title": "用戶與單位配置",
            "name":"Yhxxcz",
            "children":[]
          },{
            "path": "/Yhyjscz",
            "url":"xtgl/yhyjscz/yhyjscz",
            "title": "用戶與角色配置",
            "name":"Yhyjscz",
            "children":[]
          },{
            "path": "/Jsycdcz",
            "url":"xtgl/jsycdcz/jsycdcz",
            "title": "角色與菜單配置",
            "name":"Jsycdcz",
            "children":[]
          },{
            "path": "/Bmcz",
            "url":"xtgl/bmcz/bmcz",
            "title": "部門管理",
            "name":"Bmcz",
            "children":[]
          },{
            "path": "/Byqcz",
            "url":"xtgl/byqcz/byqcz",
            "title": "變壓器管理",
            "name":"Byqcz",
            "children":[]
          },{
            "path": "/Jldcz",
            "url":"xtgl/Jldcz/Jldcz",
            "title": "計量點管理",
            "name":"Jldcz",
            "children":[]
          },{
            "path": "/Bmyjldcz",
            "url":"xtgl/Bmyjldcz/Bmyjldcz",
            "title": "部門與計量點配置",
            "name":"Bmyjldcz",
            "children":[]
          },{
            "path": "/Gjlxcz",
            "url":"xtgl/gjlxcz/gjlxcz",
            "title": "告警類型管理",
            "name":"Gjlxcz",
            "children":[]
          },{
            "path": "/Gjpzbcz",
            "url":"xtgl/gjpzbcz/gjpzbcz",
            "title": "告警配置管理",
            "name":"Gjpzbcz",
            "children":[]
          }]
      },{
        "path": "/",
        "url":"login/login",
        "title": "登錄",
        "name":"Login",
        "children":[]
      }]
    let nav = [];
    findNav_(navArr,nav);
    return nav
  })()
})

原理：安裝router後，全局就會有一個vueRouter的構造函數，通過實例化這個傳進去一些路由規則

路由規則必須要有path（與url有關）、component（與url匹配，顯示的組件）

二、axios

axios.get("/url",{params:{id:1}}).then(res->{})
axios({
    method:"get",
    url:"/url",
    params:{id:1}
})

併發請求

併發請求：同時進行多個請求，並且同時處理返回值

需要同時處理多個請求的返回值時用到

axios.all([
    axios.get("/url"),
    axios.get("/url2"),
]).then(axios.spread((res1,res2)=>{
    console.log(res1,res2)
}))

axios創建實例

var instance = axios.cread({
    baseURL:"http://....",
    timeout:2000,
    header:{
        token:"......"
    },
    params:{}, //參數放在url上
    data:{},//參數放在請求體
    
})
使用：instance.get("/url").then()

-----------------------------
全局配置：
axios.default.timeout = 2000
實例配置：
instance.default.timeout = 2000
axios請求配置：
axios.get("/url",{timeout = 2000})

攔截器

攔截器：在請求之前或響應之後要做的一些操作
請求攔截器：可以設置請求頭帶token或顯示遮罩層
var instance = axios.create()

instance.interceptors.request.use(
    config = >{
        config.headers.Authorization = token; //請求頭帶上token
        $("#loading").show() //顯示遮罩層
        return config  //一點要返回
    },
    error => Promise.reject(error)) //請求失敗會調這裏,返回promise對象
)
// 響應攔截器
instance.interceptors.response.use(
    res=>{
        $("#loading").hide() //關閉遮罩層
        return res  //就是給回到then中的res
    },
    error=>{

    }
)

三、vuex

定義：專門用於vue框架的全局狀態管理器

State:數據倉庫，變量
Getter：獲取數據，相當於computer可以計算state的變量，派生出新的變量
Action:提交給mutation //dispath改數據時用到，異步
Mutation：修改數據，commit改數據時用到，同步

getter{
    newdata(state){
        if(state.data==1){
            return "對的"
        }
    }
}

當state中的數據變化時，都會改變newdata
使用：this.$store.getter.newdara

使用vuex的變量方法二：解構

1、import {mapState} from 'vuex'
2、compute:{
        ...mapstate(["test","test2"])
    }
使用:this.test

需要將數據提交給後臺，後臺返回狀態時用到異步

actions:{
    getVip({commit,state}){
        retrun new Promise((resolve,reject)=>{
            //發送給後臺
            commit("text",res) //修改state的狀態
        })
    }
}

this.$store.dispath("getVip").then(()=>{

})