Vue之利用vueRouter的元信息实现页面的缓存

Posted 2021-02-11 gongxiansheng

场景：

底部tab栏切换，有的页面需要每次切换刷新数据，有的并不需要。可以利用vueRouter的 meta 搭配 keep-alive 组件 进行控制缓存。代码如下：

let routes = [
    {
        path: ‘/‘, redirect: ‘/home‘,
    },
    {
        path: ‘/home‘, 
        component: Home,
        meta: {
            keepAlive: true
        }
    },
    {
        path: ‘/list‘, 
        component: List
    }
]

<template>
    <div>
        //缓存
        <keep-alive>
            <router-view v-if="$router.meta.keepAlive"></router-view> 
        </keep-alive>
        //不缓存
        <router-view v-if="!$router.meta.keepAlive"></router-view> 
    </div>
</template>