Recently, I met a scene using VUE to do mall development.

There are three pages:

1. Classification page: show many entries, such as mobile phone (ID :1), TV (ID :2), headset (ID :3), computer (ID :4), etc..

2. Commodity list page: Click the category to query the corresponding commodity list

3. Product details: Click the product in the product list to enter the detail page and view the detailed information of the current product

The target

1. Enter the product list. The latest data is displayed in the product list

2. Commodity details –> Return to commodity list Commodity list to display historical data (for example: I click the 50th commodity in the commodity list to enter the details page, click back to the list page will stay at the 50th position)

implementation

KeepAlive: true = keepAlive: true = keepAlive: true = keepAlive: true = keepAlive: true = keepAlive: true = keepAlive: true = keepAlive: true

    // Add the route configuration in the commodity list
    meta: {
      keepAlive: true,},Copy the code

Then change the app.vue file

    // Use the meta. KeepAlive attribute in the route to determine whether to cache components<keep-alive> <router-view v-if="$route.meta.keepAlive"></router-view> </keep-alive> <router-view v-if="! $route.meta.keepAlive"></router-view>Copy the code

However, this will result in the item list page being cached forever, and each time you click on the category to enter the list, you will always see the same data. Obviously that’s not the way to do it.

Created and Mounted life cycles of keep-Alive components can be triggered only once. In this case, the dedicated life cycle of the Keep-Alive component activated is used. This life cycle is triggered every time a keepAlive page is accessed.

The value of Activated checks whether the page data needs to be refreshed based on the ID

This is how the category page enters the list of items

  // Category page
  // Click category to enter the list of goods, passing a category ID
  this.$router.push({ path: '/productlist'.query: { id } });
Copy the code
  // productList page
  data() {
    return {
      id: ' '.// Receive the different category ID obtained by the category page, through the ID to find the corresponding commodity list
    };
  },
  methods: {
      getdata() {
      //4. Get commodity list data...
      },
  },
  created() {
      // 1. Record the category ID when loading the page for the first time
      this.id = this.$route.query.id;
  },
  activated() {
    // 2. Check whether the current page cache ID matches the received ID. If not, request data again
    if(this.$route.query.id ! =this.id) {
      // 3. Update id
      this.id = this.$route.query.id;
      this.getdata(); }},Copy the code

Created () is executed only once to fetch the ID, and then updates the data on the page based on the if condition in activated. At this point the logic is more perfect, but like the third case below is still not perfect. Clicking on the same category will not refresh the item list page.

1 Click classification A –> Commodity list –> Commodity details –> Click return commodity list Normal cache commodity list no problem

2 Click classification A –> List of goods –> Details of goods –> Click back to return to the classification page –> Click classification B to refresh the list of goods normally no problem

3 Click classification A –> Commodity list –> Commodity details –> Click back to return to the classification page –> Click classification A commodity list is not refreshed, there is something wrong

I’m going to continue with that

Enter the list of items on the category page

That was the jump before

      // Click category to enter the product list
      this.$router.push({ path: '/productlist'.query: { id } });
Copy the code

Change it to

      // Generate a random string
      let key = Math.random().toString(36).substr(2);
      // Click category to enter the list of items, passing an extra key
      this.$router.push({ path: '/productbrandlist'.query: { id, key } });
Copy the code

So every time I go to the category page and enter the list of items, in addition to the ID, I pass a random string key.

Then change the list page again

  data() {
    return {
      id: ' '.// Receive the different category ID obtained by the category page, through the ID to find the corresponding commodity list
    };
  },
  methods: {
      getdata() {
      // Get item list data...
      },
  },
  created() {
      // Record the category ID when the page is first loaded
      this.id = this.$route.query.id;
      // -------- here is the new addition -------
      this.key = this.$route.query.key;
  },
  activated() {
    // Matches whether the current page cache ID matches the received ID, if not, request data again
    // -------- new key matching judgment -------
    let id = this.$route.query.id;
    let key = this.$route.query.key;
    if((id ! =this.id) || (key ! =this.key)){
      this.getdata(); }},Copy the code

After this change, the whole logic is correct, the item details page returns the cached state of the item list, the category page into the item list is always the latest item list.

For similar questions I read online, I almost always use keep-alive + include, but I still have some problems with this method. I don’t know whether IT is not right for me or not suitable for my needs.

Another way to think about it is to cache the list of items directly, and then use different parameters to determine whether to reload the data. It’s easier to implement and understand.