美文网首页
vue返回上级页面不刷新,vue组件缓存(返回页面不刷新)

vue返回上级页面不刷新,vue组件缓存(返回页面不刷新)

作者: Poppy11 | 来源:发表于2020-06-17 16:27 被阅读0次

    每次使用返回是页面总是会刷新 导致了一些体验上的不愉快

    现在 发现vue中的一个很方便的方法还可以用来优化性能就是:

    keep-alive缓存组件

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

    这边我是用作缓存页面,返回不刷新,这里我只缓存keepAlive的值为true的页面

    在路由的meta属性加入keepAlive,希望缓存的页面加入vue属性即可

    image

    如果需要改变时在

    beforeRouteEnter,beforeRouteLeave中写入事件即可

    如果页面需要再加载数据则activated事件中写入你的方法

    相关文章

      网友评论

          本文标题:vue返回上级页面不刷新,vue组件缓存(返回页面不刷新)

          本文链接:https://www.haomeiwen.com/subject/jvpsxktx.html