第二种方式封装axios
这里是把传过来的对象进行了解构 ，并给了默认值 ，这样写不用在意参数传递位置顺序，因为他们是根据对象的key名称来对应的
export const httpServe = ({path, params = {}, method = 'get', data = {}}) => {
return new Promise((resolve, reject) => {
instance({
method,
url: path,
params,
data
})
.then(res => {
resolve(res)
})
.catch(err => {
reject(err)
})
})
}
使用对象解构的方式来传参
目的 这样的话就不用考虑参数的顺序问题，参数会通过key来找到对应的值
/* httpServe({ path:'users',params:{name:'zhangsan'} }) */
全局路由守卫
router.beforeEach((to,from,next)=>{
如果去的不是登录页并且本地缓存中没有token，那么就强制跳转登录页，让用户去登陆
if(to.name!=='login'&&!localStorage.token) next({name:'login'})
else next()
})
组件缓存
需要被缓存的组件
<keep-alive>
<router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
不需要被缓存的组件
<router-view v-if="!$route.meta.keepAlive"></router-view>
再创建动态路由时添加keepAlive参数，
v.children.forEach((r) => {
this.$router.addRoute("index", {
path: r.path,
name: r.path,
meta: {
title: v.authName,
subTitle: r.authName,
keepAlive:r.authName=='商品列表'?false:true
},
如此设置，只有商品列表页面keepAlive为false不需要被缓存，进入页面就会读取网络数据，并且以下两个钩子函数不会触发
activated() {}, 当组件被激活的时候触发，可以理解为组件的菜单被点击到的时候触发
deactivated() {}, 当离开组件的时候触发
其他组件中keepAlive为true，组件使用了缓存，也就是被keepAlive包裹的话，这两个钩子起作用。
删除用户
export const usersDelete=(path)=>httpServe({path,method:'delete'})
import {usersDelete } from "@/http/request.js";
async del(row){
try{
let {data:{meta:{msg,status}}}=await usersDelete('users/'+row.id);
if(status==200){
this.$message.success(msg);
this.getTableDate();
}else{
this.$message.error(msg)
}
}catch(err){
this.$message.error(err)
}
},
