Lösen Sie das Problem der Vue-Seitenaktualisierung oder des Verlusts von Back-Parametern

Im Folgenden werde ich einen Artikel zur Lösung des Problems der Vue-Seitenaktualisierung oder des Verlusts von Back-Parametern veröffentlichen. Er hat einen guten Referenzwert und ich hoffe, dass er für alle hilfreich sein wird.

In toB-Projekten stoßen wir häufig auf Listendatenfilterung und Abfrageszenarien, wenn wir die Detailseite eines Elements öffnen oder die Listenseite vorübergehend verlassen und dann (beim Zurückgehen) zu den ausgewählten Filterbedingungen zurückkehren möchten Alles ist verloren, die Bedingungen, an deren Auswahl Sie so hart gearbeitet haben, sind weg und Sie müssen eine neue Auswahl treffen. Wenn es zu einem Seitenwechsel kommt, müssen Sie Seite für Seite zu der Seite wechseln, die Sie zuvor gesehen haben ist äußerst unfreundlich.

Ich habe zwei Lösungen:

Die erste Methode: Verwenden Sie vue. Das < Keep-Alive> besteht darin, die mit einer Schicht zu überziehen.

Obwohl es einen bestimmten Effekt erzielen kann, ist es schwieriger zu kontrollieren. Beispielsweise müssen nicht alle Seiten im Projekt zwischengespeichert werden und der Code ist kompliziert zu schreiben 🎜>

Verwenden Sie localStorage direkt, einfach und grob (empfohlen) Der Code lautet wie folgt:

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)
      })
    }
  }
}

Lösung für das blinkende Problem beim Laden von Vue-Seiten

Eine kurze Diskussion über das Problem von js Abrufen des ModelAndView-Werts

Das Problem und die Lösung des Flackerns von {{}} beim Rendern von Vue

Das obige ist der detaillierte Inhalt vonLösen Sie das Problem der Vue-Seitenaktualisierung oder des Verlusts von Back-Parametern. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!