vue Tab切換以及緩存頁面處理的幾種方式

//通過點(diǎn)擊就可以實(shí)現(xiàn)兩個(gè)組件來回切換
<button @click="changeView">切換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
 }
}

<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代碼部分如上
 <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>//這里是頁面展示
  </page-view>
 </div>
</template>

//無效
<keep-alive>
 <my-component></my-component>
</keep-alive>

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

export default new Router({
 routes: [
  {
   path: '/a',
   name: 'A',
   component: A,
   meta: {
    keepAlive: false // 不需要緩存
   }
  },
  {
   path: '/b',
   name: 'B',
   component: B,
   meta: {
    keepAlive: true // 需要被緩存
   }
  }
 ]
})

<keep-alive>
  <router-view/>
</keep-alive>

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

<keep-alive include="['a','b']">//緩存name為a,b的組件
<keep-alive include ="a,b">//緩存name為a,b的組件
<keep-alive :include="/^store/">//緩存name以store開頭的組件
  <router-view/>//可以為router-view
  <component :is="view"></component>//也可以是動(dòng)態(tài)組件
</keep-alive>

export default {
 data() {
  return {};
 },
 methods: {},
 beforeRouteLeave(to, from, next) {
  to.meta.keepAlive = false; // 讓下一頁不緩存
  next();
 }
};

export default {
 data() {
  return {};
 },
 methods: {},
 beforeRouteLeave(to, from, next) {
  // 設(shè)置下一個(gè)路由的 meta
  to.meta.keepAlive = true; //下一頁緩存
  next();
 }
};