码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2019-02-28 00:48:10      阅读:237      评论:0      收藏:0      [点我收藏+]

标签:template   out   vuerouter   bsp   class   div   route   rect   pat   

场景:

底部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>

 

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

标签:template   out   vuerouter   bsp   class   div   route   rect   pat   

原文地址:https://www.cnblogs.com/gongxiansheng/p/10447721.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!