1.v-if
使用v-if="tag== 1",在data声明一个变量tag=0,请求到参数后tag=1,我会在created重新初始化tag=0,为了保险我还会加一个setTimeout定时器
<div class="main" v-if="mainShow == 1">
</div>
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)
});