Bagaimana untuk menyelesaikan masalah Vue Router tidak mengekalkan halaman asal

Vue Router ialah penyelesaian pengurusan penghalaan yang disediakan secara rasmi oleh Vue.js, yang boleh merealisasikan lonjakan halaman dan pemuatan dinamik komponen dalam aplikasi satu halaman (SPA). Kepentingan Penghala Vue adalah jelas Ia boleh memberikan pengalaman dan kecekapan pengguna yang lebih baik untuk projek.

Tetapi apabila menggunakan Penghala Vue, kita mungkin menghadapi masalah: apabila membuat lompatan halaman, halaman asal akan dimusnahkan dan keadaan asal serta data tidak dapat dikekalkan. Keadaan ini biasanya berlaku apabila menggunakan vue-router untuk melakukan lompatan halaman merentas domain, seperti melompat dari satu nama domain atau nama subdomain ke halaman dalam nama domain atau nama subdomain yang lain. Pada masa ini, laluan mencapai dari satu halaman Web ke halaman Web yang lain, keseluruhan halaman perlu dimuat semula dan keadaan dan data sebelumnya akan hilang.

Jadi, bagaimana untuk menyelesaikan masalah Vue Router tidak mengekalkan halaman asal? Berikut ialah beberapa penyelesaian:

1. Gunakan komponen Keep-Alive

Vue.js menyediakan komponen Keep-Alive, yang boleh menyimpan contoh komponen yang dimuatkan dalam cache -dibuat dan dimusnahkan. Gunakan komponen Keep-Alive untuk mengekalkan status dan data halaman asal apabila halaman melompat.

Tambah komponen Keep-Alive pada komponen yang perlu mengekalkan keadaan dan data, seperti yang ditunjukkan di bawah:

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

Dengan cara ini, keadaan komponen dan data boleh dikekalkan dan kesan lompat halaman boleh dicapai pada masa yang sama.

2. Gunakan Storan

Jika anda tidak mahu menggunakan komponen Keep-Alive, anda juga boleh menggunakan Storan untuk menyimpan status halaman dan data. Dengar fungsi kitaran hayat lompat laluan sebelumRouteLeave dalam komponen dan simpan keadaan dan data yang perlu disimpan dalam Storan dalam fungsi kitaran hayat yang dibuat selepas lompatan laluan, baca keadaan dan data daripada Storan dan pulihkannya kepada komponen .

Pelaksanaan kod khusus adalah seperti berikut:

// 路由跳转前保存组件状态和数据到Storage
beforeRouteLeave(to, from, next) {
  localStorage.setItem('data', JSON.stringify(this.data));
  next();
}
// 路由跳转后从Storage中读取组件状态和数据并赋值给组件
created() {
  let data = JSON.parse(localStorage.getItem('data'));
  if (data) {
    this.data = data;
  }
}

Dengan cara ini, status dan data halaman asal boleh dikekalkan apabila halaman melompat.

3. Menggunakan Vuex

Vuex ialah rangka kerja pengurusan keadaan untuk Vue.js, digunakan untuk berkongsi keadaan antara berbilang komponen. Jika anda perlu mengekalkan keadaan halaman dan data, anda boleh menggunakan Vuex untuk menyimpan keadaan halaman dan data dalam keadaan global, dan kemudian membacanya dari keadaan global dan menetapkannya kepada komponen selepas halaman melompat.

Pelaksanaan kod khusus adalah seperti berikut:

// 在Vuex Store中定义状态和数据
const state = {
  data: {}
}
const mutations = {
  setData(state, data) {
    state.data = data;
  }
}
// 在组件中引入Vuex和Store，并将数据存储在全局状态中
import { mapMutations } from 'vuex';
export default {
  methods: {
    ...mapMutations(['setData']),
    beforeRouteLeave(to, from, next) {
      this.setData(this.data);
      next();
    }
  },
  created() {
    this.data = this.$store.state.data;
  }
}

Dengan cara ini, status dan data halaman asal boleh dikekalkan melalui Vuex apabila halaman melompat.

Ringkasan:

Di atas adalah beberapa penyelesaian biasa untuk masalah yang Vue Router tidak mengekalkan status dan data halaman asal Mereka masing-masing mempunyai kelebihan dan kekurangan mereka sendiri penyelesaian yang sesuai mengikut keperluan perniagaan tertentu. Sama ada komponen Keep-Alive, Storage atau Vuex, ia boleh membantu kami mengekalkan keadaan dan data asal apabila halaman melompat, meningkatkan pengalaman dan kecekapan pengguna.

Atas ialah kandungan terperinci Bagaimana untuk menyelesaikan masalah Vue Router tidak mengekalkan halaman asal. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!