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(()=>{

})