Solve the problem of Vue page refresh or loss of back parameters

Below I will share with you an article that solves the problem of Vue page refresh or loss of back parameters. It has a good reference value and I hope it will be helpful to everyone.

In toB projects, we often encounter list data filtering queries. When you want to open the details page of an item or temporarily leave the list page and then return (when you back out), the selected filter conditions will Everything is lost. The conditions you have worked so hard to select are all gone, and you have to make a new selection. If there is a page change, you have to turn page by page to the page you saw before. The user experience is extremely unfriendly.

I have two solutions:

The first method: Use vue The 7c9485ff8c3cba5ae9343ed63c2dc3f7 is to coat the 975b587bf85a482ea10b0a28848e78a4 with a layer of 7c9485ff8c3cba5ae9343ed63c2dc3f7.

Although it can achieve a certain effect, it is more troublesome to control. For example, not all pages in the project need to be cached, and the code is complicated to write.

Second method: Use localStorage directly, simple and crude (recommended)

The code is as follows:

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

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

Solution to the flashing problem of vue page loading

A brief discussion on the problem of js obtaining the ModelAndView value

The problem and solution of {{}} flickering when vue renders

The above is the detailed content of Solve the problem of Vue page refresh or loss of back parameters. For more information, please follow other related articles on the PHP Chinese website!