vue2 前端跳转到一个页面判断接口是否返回 如果没返回跳转到另一个页面 需求时判断的过程中加入loading动画
时间: 2023-09-09 18:05:44 浏览: 50
好的,你可以按照以下步骤实现:
1. 在跳转页面前,先引入一个 loading 动画组件,可以使用第三方库如 Element UI 的 Loading 组件,或者自己写一个 loading 动画组件。
2. 发送请求前,显示 loading 动画,可以将 loading 组件的显示和隐藏放在请求拦截器和响应拦截器中。
3. 发送请求,并在响应拦截器中判断接口返回的数据是否符合要求,如果符合要求,则继续跳转到目标页面;如果不符合要求,则隐藏 loading 动画,跳转到另一个页面。
以下是代码示例:
```javascript
import Vue from 'vue'
import Router from 'vue-router'
import axios from 'axios'
import { Loading } from 'element-ui'
Vue.use(Router)
const router = new Router({
routes: [
{
path: '/target',
name: 'Target',
component: () => import('@/views/Target.vue')
}
]
})
const requestLoading = function () {
const loading = Loading.service({
fullscreen: true,
text: 'Loading...',
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.7)'
})
return loading
}
const responseLoading = function (loading) {
setTimeout(() => {
loading.close()
}, 1000)
}
axios.interceptors.request.use(
config => {
const loading = requestLoading()
return config
},
error => {
return Promise.reject(error)
}
)
axios.interceptors.response.use(
response => {
const loading = requestLoading()
responseLoading(loading)
if (response.data && response.data.code === 200) {
return response.data
} else {
router.push('/other')
}
},
error => {
return Promise.reject(error)
}
)
export default router
```
在上面的代码中,我们使用 Element UI 的 Loading 组件来实现 loading 动画,通过 axios 的请求拦截器和响应拦截器,来显示和隐藏 loading 动画,同时在响应拦截器中判断接口返回的数据是否符合要求,如果符合要求,则继续跳转到目标页面;如果不符合要求,则隐藏 loading 动画,跳转到另一个页面。