vue中使用keep-alive实现tab-白红宇

vue中使用keep-alive实现tab

阅读量：3933 次

发布时间：2019-05-23

本文共 1426 字，大约阅读时间需要 4 分钟。

当组件在keep-alive中被切换时，缓存一次后mounted就不执行了，而activated和deactivated这两个钩子函数会被执行。

activated：被 keep-alive 缓存的组件激活时调用。
deactivated：被 keep-alive 缓存的组件停用时调用。

keep-alive还可以接受两个参数，include和exclude，允许组件有条件地缓存。

二者都可以用字符串或正则表达式。

include：只有匹配的组件会被缓存。
exclude：任何被匹配的组件将不会被缓存

先做一个简单的tab：

结果：

代码：

路由：

主要要设置 meta:{ keepAlive:true }

export default new Router({
     mode: 'history',  base: process.env.BASE_URL,  routes: [    {
         path: '/',      name: 'home',      component: Home,      children:[        {
             path: '/',          name:'HelloWorld',          component: () => import( './components/HelloWorld.vue'),          meta:{
               keepAlive:true          }        },        {
             path: '/HelloWorld',          name:'HelloWorld',          component: () => import( './components/HelloWorld.vue'),          meta:{
               keepAlive:true          }        },        {
             path: '/tabContent',          name:'tabContent',          component: () => import( './components/tabContent.vue'),          meta:{
               keepAlive:true          }        },      ]    },  ]})