Comment utiliser le routage pour implémenter l'actualisation des pages et le contrôle du cache dans un projet Vue ?

Comment utiliser le routage pour implémenter l'actualisation des pages et le contrôle du cache dans un projet Vue ?

Dans le développement de projets Vue, il est très courant d'utiliser le routage pour implémenter l'actualisation des pages et le contrôle du cache. Cet article expliquera comment utiliser le routage pour implémenter l'actualisation des pages et le contrôle du cache dans les projets Vue, et donnera des exemples de code correspondants.

1. Configuration du routage

Tout d'abord, vue-router doit être utilisé pour la configuration du routage dans le projet Vue. vue-router peut être installé via npm et introduit et configuré dans main.js.

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

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'Home',
    component: () => import('@/views/Home.vue')
  },
  {
    path: '/about',
    name: 'About',
    component: () => import('@/views/About.vue')
  },
  // ...
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

Dans le code ci-dessus, vue-router est utilisé via la méthode Vue.use() et une table de routage (routes) est définie. Des informations de routage spécifiques peuvent être configurées en fonction des besoins réels. De plus, le mode de routage est spécifié comme mode historique via l'attribut mode, de sorte qu'il soit accessible directement en utilisant le chemin URL normal.

2. Actualisation de la page

Lorsque nous cliquons sur le bouton d'actualisation dans l'application ou appuyons sur la touche F5, la page sera actualisée. Cependant, dans SPA (Single Page Application), l'actualisation directe de la page entraînera la perte de l'état de la page. Étant donné que Vue est basé sur le DOM virtuel, l'application entière sera restituée à chaque actualisation de la page.

Si nous souhaitons restaurer l'état précédent après l'actualisation de la page, nous pouvons y parvenir en utilisant le routage dans le projet Vue. La méthode spécifique consiste à enregistrer l'état de la page actuelle dans sessionStorage ou localStorage, puis à le récupérer et à le restaurer une fois la page actualisée.

// 在App.vue中添加如下代码
beforeMount() {
  // 判断是否是刷新操作
  if (!performance.navigation.type) {
    // 获取之前保存的状态
    const state = sessionStorage.getItem('state')
    if (state) {
      // 恢复之前的状态
      this.$store.replaceState(JSON.parse(state))
    } else {
      // 第一次访问，保存当前状态
      sessionStorage.setItem('state', JSON.stringify(this.$store.state))
    }
  }
},
beforeDestroy() {
  // 刷新前保存当前的状态
  sessionStorage.setItem('state', JSON.stringify(this.$store.state))
}

Dans le code ci-dessus, les fonctions de hook de cycle de vie beforeMount() et beforeDestroy() sont utilisées pour déterminer s'il s'agit d'une opération d'actualisation. Si tel est le cas, l'état précédemment enregistré est obtenu à partir de sessionStorage et restauré dans le gestionnaire d'état de Vue (tel que). comme Vuex)milieu.

3. Contrôle du cache

Dans certains cas, nous souhaitons pouvoir conserver l'état de la page précédente lors du changement de page au lieu de restituer à chaque fois. Ceci peut être réalisé grâce au composant keep-alive de vue-router.

<template>
  <div>
    <keep-alive>
      <router-view v-if="$route.meta.cache" />
    </keep-alive>
    <router-view v-if="!$route.meta.cache" />
  </div>
</template>

<script>
export default {
  name: 'App',
  beforeRouteUpdate(to, from, next) {
    // 判断是否需要缓存页面
    if (to.meta.cache) {
      // 设置页面的缓存状态
      this.$children.forEach(child => {
        if (child.$vnode && child.$vnode.data.keepAlive) {
          child.$vnode.parent.componentInstance.cache[child.$vnode.key] = child;
        }
      })
      next()
    } else {
      // 清除之前缓存的页面状态
      this.$children.forEach(child => {
        if (child.$vnode && child.$vnode.data.keepAlive) {
          if (child.$vnode.parent.componentInstance.cache[child.$vnode.key]) {
            delete child.$vnode.parent.componentInstance.cache[child.$vnode.key];
          }
        }
      })
      next()
    }
  }
}
</script>

Dans le code ci-dessus, la page est mise en cache via le composant keep-alive, et l'élément router-view est utilisé pour afficher la page correspondante en fonction de la configuration de routage. Dans le même temps, l'état du cache de la page est contrôlé en définissant le champ méta de la route.

Dans la méthode beforeRouteUpdate(), déterminez si la page doit être mise en cache et définissez l'état du cache de la page. En même temps, effacez l'état de la page précédemment mise en cache lors du changement de page.

Grâce aux exemples de code ci-dessus, nous pouvons implémenter des fonctions d'actualisation de page et de contrôle de cache dans le projet Vue pour améliorer l'expérience utilisateur et les performances des applications. Bien entendu, la mise en œuvre spécifique peut être ajustée et étendue en fonction des besoins du projet. J'espère que cet article vous aidera à utiliser le routage pour implémenter l'actualisation des pages et le contrôle du cache dans votre projet Vue.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!