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

vue keep-alive

时间:2019-08-02 11:10:28      阅读:90      评论:0      收藏:0      [点我收藏+]

标签:参考   方法   das   open   一个   缓存   pow   export   需要   

       在初始vue路由的时候,需求是离开组件即销毁,但是现在要求再次返回组件时可以看到上次的内容,所以就与keep-alive相识

keep-alive是Vue提供的一个抽象组件,用来对组件进行缓存,从而节省性能,更详细的请参考这篇博客  https://www.jianshu.com/p/0b0222954483

       开始设置如下:

  APP.vue

<div id="app">
 <keep-alive>
            <router-view v-if="$route.meta.keepAlive"></router-view>
 </keep-alive>
            <router-view v-if="!$route.meta.keepAlive"></router-view>
</div>

  router.js

{
                name:‘dashboard‘,
                path: ‘/dashboard‘,
                component: resolve => require([‘../components/page/Dashboard.vue‘], resolve),
                meta: { keepAlive:true,title: ‘首页‘ },
                menu: ‘dashboard‘ //页面需要的权限
            },

本意就是通过路由表meta里的keepAlive属性判断路由是否需要缓存,但不知道为何未生效?

我的路由是"vue-router": "^3.0.1",

查了好久资料也未找到办法,无奈只能改变方法,使用include/exclude

APP.vue

<keep-alive include="powerType,instantPowerAnalyze">
            <router-view></router-view>
</keep-alive>

在每个路由里添加name,注意name与data同级

export default {
  name:"powerAnalyze",
  data() {}
}

 

vue keep-alive

标签:参考   方法   das   open   一个   缓存   pow   export   需要   

原文地址:https://www.cnblogs.com/lwx521/p/11286770.html

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