Itinéraire perdu après l'actualisation d'Uniapp

Lors du développement d'applications à l'aide d'uniapp, nous rencontrons souvent le problème de perte de route après l'actualisation de la page. Ce problème est très courant en développement, mais il n’est pas très difficile à résoudre. Cet article examinera les causes et les solutions à ce problème.

1. Pourquoi le problème de perte d'itinéraire se produit-il ?

Dans uniapp, nous utilisons vue-router pour la gestion du routage. Dans vue-router, la gestion du routage est implémentée via l'adresse URL du navigateur. Lorsque nous actualisons la page, le navigateur recharge la page et actualise également l'adresse URL, ce qui entraîne le problème de perte de routage.

Afin de mieux comprendre ce problème, nous pouvons d'abord jeter un œil au mode de routage de vue-router. vue-router propose deux modes de routage : hachage et historique. Le modèle de hachage fait référence à la partie de l'adresse URL commençant par le symbole #, par exemple : http://example.com/#/home. Le mode historique fait référence à la partie de l'adresse URL qui ne contient pas le symbole #, par exemple : http://example.com/home.

En mode hachage, la gestion du routage est implémentée via window.location.hash. Lors de l'actualisation de la page, le navigateur recharge la page et window.location.hash ne change pas, donc les informations de routage ne sont pas perdues. En mode historique, la gestion du routage est implémentée via window.location.pathname. Lors de l'actualisation de la page, le navigateur rechargera la page et window.location.pathname changera, ce qui entraînera le problème de la perte des informations de routage.

2. Comment éviter le problème de la perte d'itinéraire ?

Afin d'éviter le problème de perte de route, nous pouvons prendre les mesures suivantes :

1. Forcer l'utilisation du mode hachage

Dans uniapp, nous pouvons forcer l'utilisation du mode hachage en définissant l'attribut mode dans main. js. L'exemple de code est le suivant :

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. Enregistrez les informations de routage avant l'actualisation de la page

Nous pouvons stocker les informations de routage dans localStorage dans l'événement window.onbeforeunload. L'exemple de code est le suivant :

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

Une fois la page chargée, nous pouvons déterminer si nous devons passer à la page de routage précédente en déterminant si lastRoute existe dans localStorage. L'exemple de code est le suivant :

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

3. Utilisez la fonction hook avant le saut d'itinéraire

Avant chaque saut d'itinéraire, nous pouvons utiliser la fonction hook beforeEach pour enregistrer les informations de routage actuelles avant le saut afin qu'elles puissent être restaurées après la page est actualisée Statut de routage. L'exemple de code est le suivant :

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

Une fois la page chargée, nous pouvons déterminer si nous devons passer à la page de routage précédente en déterminant si lastRoute existe dans localStorage. L'exemple de code est le suivant :

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

Résumé :

La perte de route est un problème courant dans le développement d'uniapp, mais nous pouvons facilement éviter ce problème grâce aux trois méthodes ci-dessus. Lors du développement d'applications utilisant uniapp, nous devons parfaitement comprendre le mode de routage de vue-router et prendre les mesures appropriées pour résoudre le problème de la perte de route.

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!