vue-router 中使用 keepAlive ，离开页面的时候 mounted、created 等钩子被触发?

  • Z时代
  • 2024-03-16
  • 分类：IT

<keep-alive>
      <router-view v-if="$route.meta.keepAlive"></router-view>
    </keep-alive>
    <router-view v-if="!$route.meta.keepAlive"></router-view>
{
    path: '/',
    name: 'Home',
    component: Layout,
    redirect: '/index',
    children: [
      {
        path: 'index',
        name: 'HomeIndex',
        component: () => import('@/views'),
        meta: {
          keepAlive: true
        }
      },
      {
        path: 'goods',
        name: 'GoodsIndex',
        component: () => import('@/views/Goods')
      }
    ]
  },

当前打开首页加载完成，然后进入其它页面的时候

created、mounted 等钩子会被触发 … 后退无刷新
就是离开首页会执行 mounted 等钩子 …… 因为我在钩子里实现了页面初始化，如果重复执行，这样我 keepAlive 没意义了啊…

回答：

v-if 使得两个路由组件同时只存在一个，一个卸载，另外一个挂载，使得会触发 mounted、created 钩子函数。
利用 <keep-alive> 的include实现你想要的效果，将要缓存的路由组件放到 include：

<keep-alive include="HomeIndex">
  <router-view></router-view>
</keep-alive>

以上是 vue-router 中使用 keepAlive ，离开页面的时候 mounted、created 等钩子被触发? 的全部内容， 来源链接： utcz.com/p/932868.html

回到顶部