vue再次进入页面不会再次调用接口请求问题

Vue再次进入页面不会再次调用接口请求问题，主要是因为Vue实现了单页应用(SPA)的机制，它使用了Vue-router来处理路由，当我们切换路由时，Vue-router只会切换组件，而不会重新请求数据。下面是详细的解释和攻略过程。

1. Vue-router实现SPA

Vue使用Vue-router来实现路由，Vue-router是Vue.js官方的路由管理器。其主要通过改变URL，动态地加载组件。Vue-router提供了两种两种类型的路由，一种是基于哈希的URL，另一种是HTML5的History API实现的路由。

基于哈希的URL实现，在URL中使用#号，称之为哈希模式路由。其实现有一个显著的优点：在所有浏览器中都可以兼容。

HTML5的History API实现了路由模式，其允许我们使用history对象来改变URL，并可以监听浏览器历史记录中的变化。

使用Vue-router实现SPA，如下面的示例所示：

import Vue from 'vue'
import VueRouter from 'vue-router'

// 引用组件
import Home from './components/Home.vue'
import Blog from './components/Blog.vue'
import About from './components/About.vue'

// 安装插件
Vue.use(VueRouter)

// 定义路由
const routes = [
  { path: '/', component: Home },
  { path: '/blogs', component: Blog },
  { path: '/about', component: About }
]

// 创建路由实例
const router = new VueRouter({
  routes
})

// 创建Vue实例
const app = new Vue({
  router
}).$mount('#app')

2. 缓存页面组件

Vue默认使用了keep-alive进行缓存组件，当组件切换时不会销毁组件。在缓存的情况下，在组件销毁时调用了钩子函数activated()，在这个函数中可再次发送请求。如下面的示例所示：

<template>
  <keep-alive>
    <router-view ></router-view>
  </keep-alive>
</template>

<script>
export default {
  activated() {
    console.log('activated');
    // 在此重新发送请求
  }
}
</script>

参考文献：

• vue-router使用教程
• Vue 组件缓存与 activated