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

vue-router 之 keep-alive

时间:2018-09-18 17:22:57      阅读:614      评论:0      收藏:0      [点我收藏+]

标签:keepalive   --   div   pat   bar   exp   keep   efault   default   

keep-alive 简介

keep-alive是 Vue 内置的一个组件,可以使被包含的组件保留状态,或避免重新渲染。

router-view 也是一个组件,如果直接被包在 keep-alive 里面,所有路径匹配到的视图组件都会被缓存,例如:

 

技术分享图片
// routes 配置
export default [
{
  path: ‘/‘,
  name: ‘home‘,
  component: Home,
  meta: {
    keepAlive: true // 需要被缓存
  }
}, {
  path: ‘/:id‘,
  name: ‘edit‘,
  component: Edit,
  meta: {
    keepAlive: false // 不需要被缓存
  }
}]
技术分享图片

 

 

技术分享图片
<transition name="router-fade" mode="out-in">
  <keep-alive>
    <router-view v-if="$route.meta.keepAlive">
    <!-- 这里是会被缓存的视图组件,比如 Home! -->
    </router-view>
  </keep-alive>
</transition>
<transition name="router-fade" mode="out-in">
  <router-view v-if="!$route.meta.keepAlive">
    <!-- 这里是不被缓存的视图组件,比如 Edit! -->
  </router-view>
</transition>

vue-router 之 keep-alive

标签:keepalive   --   div   pat   bar   exp   keep   efault   default   

原文地址:https://www.cnblogs.com/chenglideyueguang/p/9669701.html

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