Bagaimana untuk menggunakan penghalaan untuk melaksanakan penyegaran halaman dan kawalan cache dalam projek Vue?

Bagaimana untuk menggunakan penghalaan untuk melaksanakan penyegaran halaman dan kawalan cache dalam projek Vue?

Dalam pembangunan projek Vue, adalah keperluan yang sangat biasa untuk menggunakan penghalaan untuk melaksanakan penyegaran halaman dan kawalan cache. Artikel ini akan memperkenalkan cara menggunakan penghalaan untuk melaksanakan penyegaran halaman dan kawalan cache dalam projek Vue dan memberikan contoh kod yang sepadan.

1. Konfigurasi penghalaan

Pertama sekali, anda perlu menggunakan vue-router untuk konfigurasi penghalaan dalam projek Vue. vue-router boleh dipasang melalui npm dan diperkenalkan serta dikonfigurasikan dalam 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

Dalam kod di atas, vue-router digunakan melalui kaedah Vue.use() dan jadual penghalaan (laluan) ditakrifkan. Maklumat penghalaan khusus boleh dikonfigurasikan mengikut keperluan sebenar. Selain itu, mod penghalaan ditentukan sebagai mod sejarah melalui atribut mod, supaya ia boleh diakses terus menggunakan laluan url biasa.

2. Muat semula halaman

Apabila kita mengklik butang muat semula dalam aplikasi atau menekan kekunci F5, halaman itu akan dimuat semula. Walau bagaimanapun, dalam SPA (Aplikasi Halaman Tunggal), menyegarkan halaman secara langsung akan menyebabkan keadaan halaman hilang Oleh kerana Vue adalah berdasarkan DOM maya, keseluruhan aplikasi akan dipaparkan semula setiap kali halaman dimuat semula.

Jika kita ingin memulihkan keadaan sebelumnya selepas halaman dimuat semula, kita boleh mencapainya dengan menggunakan penghalaan dalam projek Vue. Kaedah khusus adalah untuk menyimpan keadaan halaman semasa ke sessionStorage atau localStorage, dan kemudian mengambil dan memulihkannya selepas halaman dimuat semula.

// 在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))
}

Dalam kod di atas, fungsi cangkuk kitaran hayat beforeMount() dan beforeDestroy() digunakan untuk menentukan sama ada ia adalah operasi muat semula Jika ya, keadaan yang disimpan sebelum ini diperoleh daripada sessionStorage dan dipulihkan kepada pengurus keadaan Vue (seperti itu. sebagai Vuex )tengah.

3. Kawalan Cache

Dalam sesetengah kes, kami mahu dapat mengekalkan keadaan halaman sebelumnya apabila menukar halaman dan bukannya memaparkan semula setiap kali. Ini boleh dicapai melalui komponen keep-alive 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>

Dalam kod di atas, halaman dicache melalui komponen keep-alive, dan elemen paparan penghala digunakan untuk memaparkan halaman yang sepadan mengikut konfigurasi penghalaan. Pada masa yang sama, status cache halaman dikawal dengan menetapkan medan meta laluan.

Dalam kaedah beforeRouteUpdate(), tentukan sama ada halaman perlu dicache dan tetapkan status cache halaman Pada masa yang sama, kosongkan status halaman yang dicache sebelum ini apabila menukar halaman.

Melalui contoh kod di atas, kami boleh melaksanakan penyegaran halaman dan fungsi kawalan cache dalam projek Vue untuk meningkatkan pengalaman pengguna dan prestasi aplikasi. Sudah tentu, kaedah pelaksanaan khusus boleh diselaraskan dan dikembangkan mengikut keperluan projek. Saya harap artikel ini akan membantu anda menggunakan penghalaan untuk melaksanakan penyegaran halaman dan kawalan cache dalam projek Vue anda.

Atas ialah kandungan terperinci Bagaimana untuk menggunakan penghalaan untuk melaksanakan penyegaran halaman dan kawalan cache dalam projek Vue?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!