vue2 前端跳转到一个页面判断接口是否返回 如果没返回跳转到另一个页面 需求时判断的过程中加入loading动画 ,在nuxt.js下完成
时间: 2024-03-09 13:50:17 浏览: 142
在nuxt.js下实现类似的需求,可以使用middleware中间件来实现。具体实现步骤如下:
1. 在middleware目录下,创建一个名为check-api.js的中间件文件,文件内容如下:
```
export default function ({ route, redirect }) {
// 显示loading动画
showLoading()
// 发送请求判断接口是否返回
return this.$axios.get('/api/user').then(res => {
// 隐藏loading动画
hideLoading()
// 如果接口返回,继续进入下一个中间件或页面组件
return true
}).catch(() => {
// 隐藏loading动画
hideLoading()
// 如果接口没返回,跳转到/other页面
redirect('/other')
// 返回false,不再继续进入下一个中间件或页面组件
return false
})
}
```
2. 在需要判断接口返回的页面组件中,通过middleware属性来指定使用哪个中间件,比如:
```
export default {
middleware: 'check-api',
// ...
}
```
3. 在nuxt.config.js中,配置axios模块的相关选项,比如:
```
module.exports = {
// ...
axios: {
baseURL: 'http://localhost:3000'
},
// ...
}
```
4. 在showLoading和hideLoading函数中,实现你想要的loading动画效果。
需要注意的是,这种方式也没有使用响应拦截器,而是在middleware中间件中使用了axios模块来发送请求并判断接口返回的需求。
阅读全文