vue的router和axios

拼搏现实的明天。 2023-06-28 11:21 15阅读 0赞

一、什么是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(()=>{
    
    })