第二种方式封装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)

     }

    },