Résoudre le problème de l'actualisation de la page Vue ou de la perte des paramètres arrière

Ci-dessous, je partagerai avec vous un article pour résoudre le problème de l'actualisation de la page Vue ou de la perte des paramètres arrière. Il a une bonne valeur de référence et j'espère qu'il sera utile à tout le monde.

Dans les projets toB, nous rencontrons souvent des scénarios de filtrage de données de liste et de requêtes Lorsque nous souhaitons ouvrir la page de détails d'un élément ou quitter temporairement la page de liste puis revenir (en revenant), les conditions de filtre sélectionnées. Will Tout est perdu, les conditions pour lesquelles vous avez travaillé si dur ont disparu et vous devez faire une nouvelle sélection. S'il y a un changement de page, vous devez passer page par page à la page que vous avez vue auparavant. est extrêmement hostile.

J'ai deux solutions :

La première méthode : Utiliser vue Le < keep-alive> consiste à recouvrir la d'une couche de .

Bien que cela puisse produire un certain effet, il est plus difficile à contrôler. Par exemple, toutes les pages du projet n'ont pas besoin d'être mises en cache et le code est compliqué à écrire

<.>Deuxième méthode : Utiliser localStorage directement, simple et brut (recommandé)

Le code est le suivant :

list.vue

export default {
    data () {
      return {
        searchForm:{
          project_name:'',
          status:'',
          city:'',
          round:'',
          fund:'',
          charge:'',
          page: 1
        },
      },
      beforeRouteLeave(to, from, next){
      //打开详情页（或者下一个任意界面）之前，把筛选条件保存到localStorage，如果离开列表页并且打开的不是详情页则清除，也可以选择不清除
      if (to.name == 'Detail') {
        let condition = JSON.stringify(this.searchForm)
        localStorage.setItem('condition', condition)
      }else{
        localStorage.removeItem('condition')
      }
      next()
    },
    created(){
      //从localStorage中读取条件并赋值给查询表单
      let condition = localStorage.getItem('condition')
      if (condition != null) {
       this.searchForm = JSON.parse(condition)
      }
      this.$http.get('http://example.com/api/test', {params: this.searchForm})
      .then((response)=>{
        console.log(response.data)
      }).catch((error)=>{
        console.log(error)
      })
    }
  }
}

Ce qui précède est ce que j'ai compilé pour vous. J'espère que cela vous sera utile à l'avenir.

Articles associés :

Solution au problème de clignotement du chargement de la page vue

Une brève discussion sur le problème de js obtenir la valeur ModelAndView

Le problème et la solution du scintillement de {{}} lors du rendu de la vue

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!