h5页面loading丝滑小妙招，vue+vant

1.v-if

使用v-if="tag== 1"，在data声明一个变量tag=0，请求到参数后tag=1，我会在created重新初始化tag=0，为了保险我还会加一个setTimeout定时器

data(){
    return{
        tag:0
    }
}
created(){
    this.tag=0
    this.getDeparDirectory(id);
}
methods: {
    // 获取科室目录
    getDeparDirectory(params) {
      // this.$loading.show();;
      getDeparDirectory({ id: params })
        .then((res) => {
          if (res.code == 200) {
            this.items = res.data.departmentList.map((item) => {
              return {
                text: item.name,
                id: item.id,
              };
            });
            console.log('this.items', this.items);
            // this.defaultDirectoryId=this.items[0].id
            this.getDepartmentList(this.items[0].id);
            setTimeout(() => {
              this.mainShow = 1;
            }, 100);
            // this.$loading.hide();;
          }
        })
        .catch((err) => {
          // console.log(err);
        });
    },
    
}

2.v-show

与上同理

3.使用keep-alive

比如进入下一页本页数据不需要太大变化的可在本页router添加keepAlive:true属性

假如只想让他进入下一页返回才保存状态使用如下代码

  activated() {},
  // 只允许去packageDetails回来才能保存状态
  beforeRouteLeave(to, from, next) {
    if (to.path == '/departmentdetails') {
      from.meta.keepAlive = true;
    } else {
      let vnode = this.$vnode;
      let parentVnode = vnode && vnode.parent;
      if (
        parentVnode &&
        parentVnode.componentInstance &&
        parentVnode.componentInstance.cache
      ) {
        var key =
          vnode.key == null
            ? vnode.componentOptions.Ctor.cid +
              (vnode.componentOptions.tag
                ? `::${vnode.componentOptions.tag}`
                : '')
            : vnode.key;
        var cache = parentVnode.componentInstance.cache;
        var keys = parentVnode.componentInstance.keys;
        if (cache[key]) {
          this.$destroy();
          // remove key
          if (keys.length) {
            var index = keys.indexOf(key);
            if (index > -1) {
              keys.splice(index, 1);
            }
          }
          cache[key] = null;
        }
      }
    }
    next();
  },

4.在http的请求拦截，和请求响应那里添加全局loading

import {
	Toast
} from 'vant';
import { debounce } from "lodash";

//添加一个开关
const RequestStack = [];
let RequestId = 0; 
const openLoading=()=>{
	Toast.loading({
      message: "加载中",
      duration: 0, // toast不消失
    });
}
const closeLoading=debounce(()=>{
	if (!RequestStack.length) {
		Toast.clear();
	}
},100)

// 请求拦截器
axios.interceptors.request.use(
	config => {
		if (process.env.NODE_ENV === "development") {
			// config.headers['Authorization'] = "Bearer " + "eyJhbGciOiJIUzUxMiJ9.eyJ1c2VyX3R5cGUiOiIwMSIsInVzZXJfaWQiOjE1NDE3MjAzMTY2ODI1NDMxNjUsInVzZXJfbmFtZSI6IuS6keeDn-aIkOmbqCIsInVzZXJfa2V5IjoiY2RkN2IzYjItNTdlZi00MzIzLTg3MmUtM2ExMjlkODZjZmU0IiwiZW50ZXJwcmlzZV9pZCI6MTU0Mjc3ODM2NzAzMjI1NDQ5OSwic291cmNlX25hbWUiOiJzbGF2ZSJ9.Wv0nkCSgWRwXX-15I56_W9CKBG5AwgImJr5eo3K_0ObVTyDO8n9hyks8vcOJztqEO-NoGjHcsdOeAuS-VeSGfw"
			// 本地注释
			let token = window.localStorage.getItem("token")
			config.headers.common['Authorization'] = "Bearer " + token
		}else{
			// 从localStorage拿出token放进请求头里 
			let token = window.localStorage.getItem("token")
			config.headers.common['Authorization'] = "Bearer " + token
		}
		// 开启 Loading
		openLoading()
		RequestStack.push(RequestId++)
		return config
	},
	error => {
		RequestStack.pop();
		closeLoading()
		// Toast.failed('请求过程出错')
		return Promise.error(error)
	})
// 添加响应拦截器
axios.interceptors.response.use((response) => {
	RequestStack.pop();
	closeLoading()
	// 对响应数据做点什么
	return response
}, (error) => {
	RequestStack.pop();
	closeLoading()
	// Toast.failed('响应过程出错')
	return Promise.reject(error)
});