vue简单的拦截路由,显示loading

vue页面响应前的加载中显示loading过渡数据的加载时间
我用的是vue-resource和mint-ui的组件Intercepors,也可以自己定义一张图片,详情请看https://blog.csdn.net/qq_37504376/article/details/80681835
效果如图,
在这里插入图片描述
在main.js中导入mint-ui,加载中的样式还需另外导入
在这里插入图片描述
导入之后重点来了,使用全局拦截器。在每次http的请求响应之后,如果设置了拦截器如下,会优先执行拦截器函数,获取响应体,响应结束后把response返回给then接收,也可以在判断用户登录的时候决定跳转到登录页面还是留在当前留在当前页面继续获取数据或者跳转注册界面,当然我这里是直接关闭加载中的状态了
在这里插入图片描述
之后再自己修改遮罩层的样式就非常简单了,可以利用vuex的数据共享

猜你喜欢

转载自blog.csdn.net/weixin_43371136/article/details/86550299