vue单页应用前进刷新后退不刷新如何实现(利用keep-alive)

 场景如下

下面的图片(图1):后退时,不刷新的页面。(需要保证左侧列表中的active状态)

vue单页应用前进刷新后退不刷新如何实现(利用keep-alive)_第1张图片

 

下面的图片(图2):点击“返回”,返回到上图(图1)所示的页面,此时要保证(图1)的页面不刷新

vue单页应用前进刷新后退不刷新如何实现(利用keep-alive)_第2张图片

那么如何实现 ?

step1

在不需要刷新的路由元信息meta中,增加keepAlive:true属性

vue单页应用前进刷新后退不刷新如何实现(利用keep-alive)_第3张图片

step2

在App.vue模板中改写,具体可以这样: 



  # 组件注释
  项目入口







然后就完了

参考网址:vue单页应用前进刷新后退不刷新方案探讨 - wonyun - 博客园

你可能感兴趣的:(vue,keep-alive,前进刷新后退不刷新)