Route nach Uniapp-Aktualisierung verloren

Bei der Entwicklung von Anwendungen mit Uniapp stoßen wir häufig auf das Problem des Routenverlusts nach der Seitenaktualisierung. Dieses Problem tritt in der Entwicklung sehr häufig auf, ist jedoch nicht sehr schwer zu lösen. In diesem Artikel werden die Ursachen und Lösungen für dieses Problem untersucht.

1. Warum tritt das Problem des Routenverlusts auf?

In uniapp verwenden wir vue-router für die Routing-Verwaltung. Im Vue-Router wird die Routing-Verwaltung über die URL-Adresse des Browsers implementiert. Wenn wir die Seite aktualisieren, lädt der Browser die Seite neu und aktualisiert auch die URL-Adresse, was zum Problem des Routingverlusts führt.

Um dieses Problem besser zu verstehen, können wir uns zunächst den Routing-Modus von Vue-Router ansehen. vue-router bietet zwei Routing-Modi: Hash und Verlauf. Das Hash-Muster bezieht sich auf den Teil der URL-Adresse, der mit dem #-Symbol beginnt, zum Beispiel: http://example.com/#/home. Der Verlaufsmodus bezieht sich auf den Teil der URL-Adresse, der das #-Symbol nicht enthält, zum Beispiel: http://example.com/home.

Im Hash-Modus wird die Routing-Verwaltung über window.location.hash implementiert. Beim Aktualisieren der Seite lädt der Browser die Seite neu und window.location.hash ändert sich nicht, sodass die Routing-Informationen nicht verloren gehen. Im Verlaufsmodus wird die Routing-Verwaltung über window.location.pathname implementiert. Beim Aktualisieren der Seite lädt der Browser die Seite neu und window.location.pathname ändert sich, was zum Problem des Verlusts von Routing-Informationen führt.

2. Wie vermeide ich das Problem des Routenverlusts?

Um das Problem des Routenverlusts zu vermeiden, können wir die folgenden Maßnahmen ergreifen:

1. Die Verwendung des Hash-Modus erzwingen

In Uniapp können wir die Verwendung des Hash-Modus erzwingen, indem wir das Modusattribut in main festlegen. js. Der Beispielcode lautet wie folgt:

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. Routing-Informationen vor der Seitenaktualisierung speichern

Wir können Routing-Informationen in localStorage im window.onbeforeunload-Ereignis speichern. Das Codebeispiel lautet wie folgt:

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

Nachdem die Seite geladen wurde, können wir feststellen, ob wir zur vorherigen Routing-Seite springen müssen, indem wir feststellen, ob lastRoute in localStorage vorhanden ist. Das Codebeispiel lautet wie folgt:

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

3. Verwenden Sie die Hook-Funktion vor dem Routensprung.

Vor jedem Routensprung können wir die beforeEach-Hook-Funktion verwenden, um die aktuellen Routing-Informationen vor dem Sprung zu speichern, damit sie danach wiederhergestellt werden können Die Seite wird aktualisiert. Routing-Status. Das Codebeispiel lautet wie folgt:

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

Nachdem die Seite geladen wurde, können wir feststellen, ob wir zur vorherigen Routing-Seite springen müssen, indem wir feststellen, ob lastRoute in localStorage vorhanden ist. Das Codebeispiel lautet wie folgt:

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

Zusammenfassung:

Verlorenes Routing ist ein häufiges Problem bei der Uniapp-Entwicklung, aber wir können dieses Problem mit den oben genannten drei Methoden leicht vermeiden. Bei der Entwicklung von Anwendungen mit Uniapp sollten wir den Routing-Modus von Vue-Router vollständig verstehen und geeignete Maßnahmen ergreifen, um das Problem des Routenverlusts zu lösen.

Das obige ist der detaillierte Inhalt vonRoute nach Uniapp-Aktualisierung verloren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!