Laluan hilang selepas muat semula uniapp

Apabila membangunkan aplikasi menggunakan uniapp, kami sering menghadapi masalah kehilangan laluan selepas muat semula halaman. Masalah ini sangat biasa dalam pembangunan, tetapi ia tidak begitu sukar untuk diselesaikan. Artikel ini akan menyelidiki punca dan penyelesaian kepada masalah ini.

1. Mengapakah masalah kehilangan laluan berlaku?

Dalam uniapp, kami menggunakan vue-router untuk pengurusan penghalaan. Dalam vue-router, pengurusan penghalaan dilaksanakan melalui alamat URL penyemak imbas. Apabila kami memuat semula halaman, penyemak imbas akan memuat semula halaman dan juga memuat semula alamat URL, yang membawa kepada masalah kehilangan laluan.

Untuk lebih memahami masalah ini, kita boleh lihat mod penghalaan vue-router dahulu. vue-router menyediakan dua mod penghalaan: hash dan sejarah. Corak cincang merujuk kepada bahagian alamat URL yang bermula dengan simbol #, contohnya: http://example.com/#/home. Mod sejarah merujuk kepada bahagian alamat URL yang tidak mengandungi simbol #, contohnya: http://example.com/home.

Dalam mod cincang, pengurusan penghalaan dilaksanakan melalui window.location.hash. Apabila memuat semula halaman, penyemak imbas memuat semula halaman dan window.location.hash tidak berubah, jadi maklumat penghalaan tidak hilang. Dalam mod sejarah, pengurusan penghalaan dilaksanakan melalui window.location.pathname. Apabila memuat semula halaman, penyemak imbas akan memuat semula halaman dan window.location.pathname akan berubah, yang membawa kepada masalah kehilangan maklumat penghalaan.

2. Bagaimana untuk mengelakkan masalah kehilangan laluan?

Untuk mengelakkan masalah kehilangan laluan, kami boleh mengambil langkah berikut:

1. Paksa penggunaan mod cincang

Dalam uniapp, kita boleh lulus dalam utama Tetapkan atribut mod dalam .js untuk memaksa penggunaan mod cincang. Kod sampel adalah seperti berikut:

import Vue from 'vue'
import App from './App'
import router from './router'

Vue.config.productionTip = false

new Vue({
  el: '#app',
  router,
  mode: 'hash', // 强制使用hash模式
  render: h => h(App)
})

2. Simpan maklumat penghalaan sebelum muat semula halaman

Kami boleh menyimpan maklumat penghalaan dalam localStorage dalam acara window.onbeforeunload. Contoh kod adalah seperti berikut:

mounted() {
  // 监听onbeforeunload事件，保存路由信息
  window.onbeforeunload = () => {
    localStorage.setItem('lastRoute', this.$route.fullPath)
  }
}

Selepas halaman dimuatkan, kita boleh menentukan sama ada kita perlu melompat ke halaman penghalaan sebelumnya dengan menentukan sama ada lastRoute wujud dalam localStorage. Contoh kod adalah seperti berikut:

mounted() {
  // 判断是否存在lastRoute，若存在则跳转到之前的路由页面
  const lastRoute = localStorage.getItem('lastRoute')
  if (lastRoute) {
    localStorage.removeItem('lastRoute')
    this.$router.replace(lastRoute)
  }
}

3. Gunakan fungsi cangkuk sebelum lompat laluan

Sebelum setiap lompat laluan, kita boleh menggunakan fungsi cangkuk beforeEach sebelum lompatan. Simpan maklumat penghalaan semasa supaya status penghalaan boleh dipulihkan selepas halaman dimuat semula. Contoh kod adalah seperti berikut:

router.beforeEach((to, from, next) => {
  localStorage.setItem('lastRoute', from.fullPath) // 保存当前路由信息
  next()
})

Selepas halaman dimuatkan, kita boleh menentukan sama ada kita perlu melompat ke halaman penghalaan sebelumnya dengan menentukan sama ada lastRoute wujud dalam localStorage. Contoh kod adalah seperti berikut:

mounted() {
  // 判断是否存在lastRoute，若存在则跳转到之前的路由页面
  const lastRoute = localStorage.getItem('lastRoute')
  if (lastRoute) {
    localStorage.removeItem('lastRoute')
    this.$router.replace(lastRoute)
  }
}

Ringkasan:

Kehilangan laluan adalah masalah biasa dalam pembangunan uniapp, tetapi kita boleh mengelakkan masalah ini dengan mudah melalui tiga kaedah di atas. Apabila membangunkan aplikasi menggunakan uniapp, kita harus memahami sepenuhnya mod penghalaan vue-router dan mengambil langkah yang sesuai untuk menyelesaikan masalah kehilangan laluan.

Atas ialah kandungan terperinci Laluan hilang selepas muat semula uniapp. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!