Tab switching and several ways of caching page processing


I believe that tab switching is not unfamiliar to everyone. It is often used in the background management system. If you don't know, you can take a look at the tab switching at the top of the browser. The effect is probably like this.


1. How to switch

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

//The two components can be switched back and forth by clicking
<button @click="changeView">switch view</button>
<component :is="currentView"></component>

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

computed: {
      return this.viewList[this.index];
 methods: {
  changeView() {

Note: This is mostly used for several sub modules under a single page. Generally, the following routes are used for switching

Use routing (this is the problem of configuring routing, which will not be repeated)


2. Dynamically generate tab s

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

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

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

  <menu-item v-for="(item,index) in menuList" :key="index" @click="addToTabList(item.path)">
    <router-link :to="item.path">{{}}</router-link>
  <menu class="left"/>//The menu code is shown above
  <div class="right">
      <tab-item v-for="(item,index) in tabList" :key="index">
        <router-link :to="item.path">{{}}</router-link>
        <icon class="delete" @click="deleteTab"></icon>
      <router-view></router-view>//Here is the page display
The above code is not the actual code, but only provides a general idea. As for what addToTabList and deleteTab do, they are simple push and splice operations of array methods. In order to have a good effect, we may also need some active styles of tabs, which will not be demonstrated here.

Computer embroidery factory Guangzhou brand design company

3. Cache component

It's not enough to just switch tabs. After all, if you want a tab page, you have to switch back and forth. We need to save the progress of its operations in different tabs, such as the filled in form information or the queried data list.
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. It can keep the state in memory during component switching to prevent repeated rendering of DOM.
  • < keep alive > when wrapping dynamic components, inactive component instances are cached rather than destroyed.
  • < keep alive > is similar to < transition >, but it is an abstract component. It will not render in the DOM tree (neither real nor virtual), nor exist in the parent component chain. For example, you will always be in this$ Cannot find keep alive in parent \.
Note: keep alive cannot be used to cache fixed components, which will be invalid

3.2 use

3.2.1 use of old version Vue before 2.1

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

The meta information meta of router needs to be set in the routing information

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

3.2.2 relatively new and simple usage

  • Cache all components / routes directly

   <component :is="view"></component>
  • Use include to handle components / routes that need caching
include can be used in several ways. It can be an array, strings separated by punctuation, or regular. When using regular, you need to use v-bind to bind.
<keep-alive include="['a','b']">//Cache components with name s a and B
<keep-alive include ="a,b">//Cache components with name s a and B
<keep-alive :include="/^store/">//Cache components whose name starts with store
    <router-view/>//It can be router view
    <component :is="view"></component>//It can also be a dynamic component
  • Use exclude to exclude routes that do not need caching
In contrast to include, components in exclude are not cached. The usage is similar and will not be repeated

3.2.3 a strange situation

There are two ways of page Jump: A - > C and B - > C, but we don't need cache when we go from A to C, and we need cache when we go from B to C. At this time, we need to use the hook of routing in combination with the usage of the old version.

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

3.3 life cycle function of cache component

When the cache component is opened for the first time, like ordinary components, it also needs to execute the created, mounted and other functions.
However, when activated and deactivated again, the life cycle functions of these common components will not be executed, and two unique life cycle functions will be executed.

    • activated
      This is called when the cached component is reactivated
    • deactivated
      This is called when the cached component is deactivated

Tags: Front-end

Posted by rehfeld on Thu, 12 May 2022 06:27:11 +0300