Vue ページの更新またはバック パラメータの損失の問題を解決する

以下に、Vue ページの更新またはバック パラメータの損失の問題を解決する記事を紹介します。これは良い参考値であり、皆さんのお役に立てれば幸いです。

toB プロジェクトでは、アイテムの詳細ページを開いたり、リスト ページから一時的に離れてから戻ったりすると、選択したすべてのフィルタリング条件が失われることがよくあります。 . Xin せっかく選んだ条件が消えてしまって、ページングミスがあると、また次から次へと前に見たページに戻らなければいけないのが、ユーザーエクスペリエンスとしては非常に高いです。不親切な。

私には 2 つの解決策があります:

最初の方法: vue の 7c9485ff8c3cba5ae9343ed63c2dc3f7 を使用します。つまり、975b587bf85a482ea10b0a28848e78a4 を 7c9485ff8c3cba5ae9343ed63c2dc3f7 のレイヤーでコーティングします。 ;。

一定の結果を達成できますが、たとえば、プロジェクト内のすべてのページをキャッシュする必要はなく、コードの記述が複雑になります

2 番目の方法: localStorage を直接使用します。 、シンプルで粗雑です（推奨）

コードは次のとおりです:

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

上記は、将来すべての人に役立つことを願ってまとめたものです。

関連記事:

vueページ読み込み時のちらつき問題の解決策

jsによるModelAndView値の取得の問題についての簡単な説明

Vueレンダリングの{{}}のちらつき問題とその解決策

以上がVue ページの更新またはバック パラメータの損失の問題を解決するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。