vue跳转页面同时调用接口

在Vue中，可以通过使用路由来实现页面跳转。如果需要在页面跳转的同时调用接口，可以在路由跳转前发送请求，等待请求完成后再进行页面跳转。下面是一个简单的示例代码：

import Vue from 'vue'
import Router from 'vue-router'
import axios from 'axios'

Vue.use(Router)

const router = new Router({
  routes: [
    {
      path: '/home',
      name: 'Home',
      component: Home
    },
    {
      path: '/about',
      name: 'About',
      component: About
    },
    {
      path: '/user/:id',
      name: 'User',
      component: User,
      beforeEnter: (to, from, next) => {
        axios.get('/api/user/' + to.params.id)
          .then(response => {
            // 处理接口响应数据
            next()
          })
          .catch(error => {
            // 处理接口请求错误
            next('/home')
          })
      }
    }
  ]
})

上面的代码中，我们定义了一个名为User的路由，该路由接收一个id参数，并调用了一个接口来获取用户信息。在接口请求完成后，我们再通过next()方法来进行页面跳转。需要注意的是，如果接口请求失败了，我们可以通过next()方法来跳转到指定的页面，例如上面的代码中我们跳转到了Home页面。