vue2 前端跳转到一个页面判断接口是否返回 如果没返回跳转到另一个页面 需求时判断的过程中加入loading动画 不适用相应拦截器

你可以在使用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 动画，跳转到另一个页面。

以下是代码示例：

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 动画，跳转到另一个页面。

vue2实现跳转开启loading，跳转完成关闭loading

好的，关于vue2实现跳转开启loading，跳转完成关闭loading的问题，我可以给您提供一些参考。在vue2中，可以通过路由导航守卫中的beforeEach方法和afterEach方法来实现跳转前后的loading效果。具体的代码实现可以参考以下示例：

// 在router/index.js文件中定义路由导航守卫
import router from './router'
import { Loading } from 'element-ui'

let loadingInstance = null

// 路由跳转前
router.beforeEach((to, from, next) => {
  // 在跳转前开启loading效果
  loadingInstance = Loading.service({ fullscreen: true })
  next()
})

// 路由跳转后
router.afterEach(() => {
  // 在跳转后关闭loading效果
  loadingInstance.close()
})

在这个示例中，我们使用了Element UI提供的Loading组件来实现loading效果。在beforeEach方法中，我们调用Loading.service方法开启loading实例，fullscreen参数可以指定是否全屏显示loading效果，next方法则确保路由跳转成功。在afterEach方法中，我们调用loadingInstance.close方法来关闭loading实例，确保loading效果在路由跳转结束后能够正确关闭。

希望这个示例能够帮助您解决问题。如果您还有其他问题，可以继续提出。