Vue project implementation list page - details page returns without refreshing, remember Xiaobai's keep - Alive's road to stepping on the pit

demand analysis:

1. In the project implementation general list page-details page, the return is not refreshed ;

2. Filter conditions are added to the general list page. After filtering, enter the filter result page, and then click any product in the filter result page to go to the detail page and then return to the filter result page to cache the filter results just now. will not refresh.

As a Vue novice, the first thing I think of to solve such a problem is to go to some search engines to find the experience of various gods in this area. I found that each requirement is not the same, and at the same time, it cannot be solved in a targeted manner. The problem I encountered was discussed for 9 days under the guidance of the teacher, and the problem was finally solved. Next, I will show you what we have done:

1. Vue uses keep-alive/beforeRouteLeave , keep-Alive's cache function

     In vue, the default router-link components entering each page will not be cached. In order to solve this problem, we can use keep-Alive to cache to improve performance and meet our needs

Make the following changes in app.vue:

将 <router-view></router-view>更改至如下的字段：


<keep-alive>
            <router-view v-if="$route.meta.keepAlive" >
                this.$router.push({name:'goodsList',params:{form:this.form}})
            </router-view>
</keep-alive>

<router-view v-if="!$route.meta.keepAlive" ></router-view>

 Then add the requirement of keepAlive: true to the route meta that needs to be cached in index.js, as follows

{
              path: 'goodsList',
              name: 'goodsList',
              component: goodsList,
              meta: {
                     title: '列表',
                     keepAlive: true,
                     need_log: false
                    }
},

2. Use beforeRouteLeave to dynamically decide whether to refresh the cache.

     First, introduce the related hook functions such as beforeRouteLeave:

     There are three navigation guards inside the vue component:
     1) beforeRouteEnter
     2) beforeRouteUpdate (2.2 new)
     3) beforeRouteLeave
      It can be seen from the literal meaning - beforeRouteLeave is the guard that starts when leaving the page, and it is exactly what we need

      The three parameters of beforeRouteLeave are: to refers to the page to go to;

                                                                    from refers to the address of this page;

                                                                    next refers to the next step;

      This leave guard hook function is generally used to prevent the embarrassing situation that the user leaves suddenly before saving the modification, and the navigation can be canceled by next.

      

//钩子函数的具体使用案例


beforeRouteLeave (to, from, next) {
            if (to.name == "goodsList") {
                to.meta.keepAlive = true;
                
            }
            next();
        },

    Using beforeRouteLeave of the route, if the page that jumps out needs to return the route without refreshing the page (just like the filter result page required by this project), then give the current meta.keepAlive=true, otherwise set it to false

//下面这个函数其中to表示下一个要进入的路由。form表示当前页面路由。next()表示执行跳转。
        beforeRouteLeave (to, from, next) {
            if (to.name == "goodsDetail") {
                from.meta.keepAlive = true;
                console.log("这是list列表里的if语句")
            } else if (to.name == "goodsList_blank") {//此处是假的一个空白页来进行二次刷新，文章最后会有对其介绍及代码的书写
                console.log('into goodsList_blank' + from.meta.keepAlive);
            } else {
                from.meta.keepAlive = false;
            }
            next();
        },

   At that time, I thought it was not that complicated. I thought that when I need to cache, I will go to the true view of keepAlive, and when I come back, the cache will not be refreshed. But although this problem was solved, another big problem was encountered during the test that blocked the progress of the task: the problem of going from the general product list page to the detail page and then back to the general product list page was solved. , but after entering the filter conditions, enter the filter result page according to the process, and the filter result appears. After clicking the details, return, and jump directly to the general product list page (our general product list page and the filter result page are the same url), this problem is very disgusting, which means that he can only cache one page at present, and then all future operations will return the previously cached page, which is a bit depressing.
   The article I saw before introduced the use of go (0) to re-enter the page once, but due to the same url, when the page is re-entered, it is still the general product list page; when I refer to the relevant answers of the master, I found that In addition, you can add a blank page to take over the following situation where keepAlive is false, which is equivalent to using the blank page to achieve go (0), so that the page can be flushed, and the experience will not be refreshed. Since it is an empty page, it is almost invisible question:

    1) The application of keep-alive, modify the meta;

    2) Utilization of beforeRouteLeave hook function

    3) Code filling of blank.vue

3. Use blank for processing

<template>
    <div></div>
</template>

<script>
    export default {
        name: "blank",
        data() {
            return {
            };
        },
        methods: {
            initPage()
            {
                this.$router.push({ name: 'goodsList', params:this.$route.params})
            }
        },
        created() {
            this.initPage();
        },
    }
</script>

<style scoped>

</style>

   created() calls the method of this.initpage, and blank just re-enters the list page of goodslist

4. Add specific logic to list.vue for judgment

beforeRouteLeave (to, from, next) {
            if (to.name == "goodsDetail") {
                from.meta.keepAlive = true;
                console.log("这是list列表里的if语句")
            } else if (to.name == "goodsList_blank") {
                console.log('into goodsList_blank' + from.meta.keepAlive);
            } else {
                from.meta.keepAlive = false;
            }
            next();
        },
        activated(){
            this.getAllData();
        },
        methods: {
            getAllData()
            {
                console.log(this.$route.params)
                if(this.$route.params.form){
                    this.pageType = 'search'
                }
                this.getListData(); //获取产品列表
                //判断如果keepAlive是false那就修改为True，再重载一下
                if(!this.$route.meta.keepAlive)
                {
                    this.$route.meta.keepAlive = true;
                    if(this.$route.params.form){
                        this.$router.push({ name: 'goodsList_blank', params:this.$route.params})
                    }else {
                        this.$router.go(0)
                    }
                }
            },

5. At the same time, a hook function is also added in detail.vue ,
     which works when the details page returns to the filter result page. The specific code implementation is as follows:

 beforeRouteLeave (to, from, next) {
            if (to.name == "goodsList") {
                to.meta.keepAlive = true;
                console.log("dsafdsafdsafdsagreaghjsag")
            }
            next();
        },

6. Add a hook function in search.vue

    The details page of the product returns to the goodsList, and at the same time in the search settings, it will also jump to the goodsList after the search conditions are entered

beforeRouteLeave (to, from, next) {
            if (to.name == "goodsList") {
                to.meta.keepAlive = false;
                console.log("nihaoa1ssssssssssssssssssss")
            }
            next();
        },

 

The above are the specific steps I took to solve this requirement. It may be roughly the same as your requirement, but each person has to write for their own project. I hope my solution process can help everyone who needs it!