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