vue2 前端跳转到一个页面判断接口是否返回 如果没返回跳转到另一个页面 需求时判断的过程中加入loading动画 不适用相应拦截器
时间: 2023-09-09 12:05:44 浏览: 48
你可以在使用Vue Router的时候,通过beforeEnter钩子函数来实现这个需求。具体实现步骤如下:
1. 在路由配置中,为需要判断接口返回的页面添加beforeEnter钩子函数,比如:
```
{
path: '/user',
name: 'user',
component: User,
beforeEnter: (to, from, next) => {
// 显示loading动画
showLoading()
// 发送请求判断接口是否返回
axios.get('/api/user').then(res => {
// 隐藏loading动画
hideLoading()
// 如果接口返回,跳转到/user页面
next()
}).catch(() => {
// 隐藏loading动画
hideLoading()
// 如果接口没返回,跳转到/other页面
next('/other')
})
}
},
```
2. 在showLoading和hideLoading函数中,实现你想要的loading动画效果。
3. 最后,在路由配置中,把/user和/other页面的配置都加上。这样,无论接口是否返回,都会跳转到对应的页面。
需要注意的是,这种方式并没有使用响应拦截器,而是在路由配置中使用了beforeEnter钩子函数来实现判断接口返回的需求。
相关问题
vue2 前端跳转到一个页面判断接口是否返回 如果没返回跳转到另一个页面 需求时判断的过程中加入loading动画
好的,你可以按照以下步骤实现:
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 动画,跳转到另一个页面。
vue跳转页面如何加Loading
在Vue中实现页面跳转时加上Loading效果可以通过以下步骤实现:
1. 首先,在main.js中引入Loading组件,并注册为全局组件。可以使用import语句引入Loading组件,然后使用Vue.component()方法注册为全局组件。
2. 在页面中使用Loading组件。在需要加上Loading效果的页面中,使用<template>标签包裹需要显示Loading的内容,并在需要显示Loading的位置使用<v-loading>标签。
3. 在导航守卫中控制Loading的显示和隐藏。在router.beforeEach()事件中,可以根据需要控制Loading的显示和隐藏。可以使用全局变量routerLoading来控制是否启用页面跳转Loading。在跳转开始时调用glo_loading.loadingShow()方法显示Loading,在跳转结束时调用glo_loading.loadingHide()方法隐藏Loading。
4. 可选:可以使用全局的loading简单封装来实现Loading的显示和隐藏。在loading.js文件中,可以定义loadingShow()和loadingHide()方法来显示和隐藏Loading。可以使用ElementUI.Loading.service()方法创建一个Loading实例,并使用loading.close()方法关闭Loading。
综上所述,实现页面跳转时加上Loading效果的代码如下所示:
```javascript
// main.js
import Loading from './components/Loading.vue';
Vue.component('v-loading', Loading);
// 页面中使用Loading组件
<template>
<div class="detail">
<v-loading v-if="isLoading"></v-loading>
<div class="head">向胃猛冲,芜湖起飞</div>
</div>
</template>
// 导航守卫中控制Loading的显示和隐藏
router.beforeEach((to, from, next) => {
routerLoading ? glo_loading.loadingShow() : '';
// 其他逻辑...
routerLoading ? glo_loading.loadingHide() : '';
})
// 全局loading简单封装
import ElementUI from 'element-ui';
var loading = null;
const loadingShow = () => {
loading = ElementUI.Loading.service(loadingConfig);
}
const loadingHide = () => {
loading.close();
}
const loadingObj = {
loadingShow,
loadingHide
}
export default loadingObj
```
希望以上解答对您有帮助。
#### 引用[.reference_title]
- *1* [VUE 跳转loading动画组件](https://blog.csdn.net/Red_sevenWord/article/details/107353923)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item]
- *2* *3* [vue项目全局配置loading(页面跳转和ajax请求)](https://blog.csdn.net/John_jian_yo/article/details/105557247)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item]
[ .reference_list ]