Several ways to switch between Vue Tab and cache pages

1. How to switch

Using dynamic components, I believe everyone can understand it (some codes are omitted)

//You can switch between the two components by clicking <button @click="changeView">Switch view</button>
<component :is="currentView"></component>

 import pageA from "@/views/pageA";
import pageB from "@/views/pageB";

 computed: {
  currentView(){
      return this.viewList[this.index];
  }
},
 methods: {
  changeView() {
    this.index=(++this.index)%2
  }
}

Note: This is mostly used for several sub-modules under a single page. Generally, the following routing is used for switching more frequently.

Use routing (this is a question of configuring routing, so I won’t go into details)

2. Dynamically generate tabs

Generally, the tab switching provided by the UI framework is like the one above, and we need to write several tab pages and other configurations ourselves. But what if we want to generate a tab page by clicking on the directory on the left and be able to close it at any time (as shown below)?

Just give the route a click event, save your route address into a list, and render it into another flat tab directory.

Suppose your layout is like this, with a directory on the left, a tab on the top, and pages with words

<menu>
  <menu-item v-for="(item,index) in menuList" :key="index" @click="addToTabList(item.path)">
    <router-link :to="item.path">{{item.name}}</router-link>
  <menu-item>
</menu>

<template>
  <menu class="left"/>//menu code part as above <div class="right">
    <tab-list>
      <tab-item v-for="(item,index) in tabList" :key="index">
        <router-link :to="item.path">{{item.name}}</router-link>
        <icon class="delete" @click="deleteTab"></icon>
      </tab-item>
    </tab-list>
    <page-view>
      <router-view></router-view>//Here is the page display </page-view>
  </div>
</template>

The above code is not the actual code, it only provides a rough idea. As for how to addToTabList and deleteTab, it is just a simple push and splice operation of the array method. In order to achieve a good-looking effect, we may also need some active styles for the tabs, which are not demonstrated here.

3. Cache Component

Simply switching tabs is far from enough. After all, everyone wants to switch back and forth between tabs. We need to save the progress of his operations in different tabs, such as filled-in form information, or a list of data that has been queried.
So how do we cache components?
You only need to use the keep-alive component in vue

3.1 keep-alive

• <keep-alive> is a built-in component of Vue, which can keep the state in memory during component switching to prevent repeated rendering of DOM.
• <keep-alive> When wrapping a dynamic component, inactive component instances are cached instead of being destroyed.
• <keep-alive> is similar to <transition>, but it is an abstract component. It is not rendered in the DOM tree (neither real nor virtual), nor does it exist in the parent component chain. For example, you will never find keep-alive in this.$parent.

Note: You cannot use keep-alive to cache fixed components, it will be invalid

//Invalid <keep-alive>
  <my-component></my-component>
</keep-alive>

3.2 Use

3.2.1 Use of old versions before Vue 2.1

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

You need to set the router's meta information in the routing information

export default new Router({
  routes: [
    {
      path: '/a',
      name: 'A',
      component: A,
      meta: {
        keepAlive: false // No caching required }
    },
    {
      path: '/b',
      name: 'B',
      component: B,
      meta: {
        keepAlive: true // needs to be cached }
    }
  ]
})

3.2.2 Relatively new and simple usage

Cache all components/routes directly

<keep-alive>
    <router-view/>
</keep-alive>
<keep-alive>
   <component :is="view"></component>
</keep-alive>

Use include to handle components/routes that need to be cached
There are several ways to use include. It can be an array, a string separated by punctuation, or a regular expression. When using a regular expression, you need to use v-bind to bind it.

<keep-alive include="['a','b']">//Cache components named a, b<keep-alive include ="a,b">//Cache components named a, b<keep-alive :include="/^store/">//Cache components whose name starts with store <router-view/>//Can be router-view
    <component :is="view"></component>//Can also be a dynamic component</keep-alive>

Using exclude to exclude routes that do not need to be cached is the opposite of include. Components in exclude will not be cached. The usage is similar, so I won’t go into details here.

3.2.3 A rather strange situation: When there are two page jump methods, A->C and B->C, but when we jump from A to C, we do not need to cache, but when we jump from B to C, we need to cache. At this time, we need to use the routing hook combined with the old version to achieve it.

export default {
  data() {
    return {};
  },
  methods: {},
  beforeRouteLeave(to, from, next) {
    to.meta.keepAlive = false; // Do not cache the next page next();
  }
};

export default {
  data() {
    return {};
  },
  methods: {},
  beforeRouteLeave(to, from, next) {
    // Set the meta of the next route
    to.meta.keepAlive = true; //Next page cache next();
  }
};

3.3 Cache component life cycle function

When a cache component is opened for the first time, like a normal component, it also needs to execute functions such as created and mounted.
However, when activated and deactivated again, the lifecycle functions of these common components will not be executed, and two more unique lifecycle functions will be executed.

• activated
  

This will be called when the cached component is reactivated.

• deactivated
  

This is called when the cached component is deactivated.

The above is the details of several ways to switch between vue tabs and process cached pages. For more information about switching between vue tabs and processing cached pages, please pay attention to other related articles on 123WORDPRESS.COM!