参考文章:
https://blog.youkuaiyun.com/qq_40963664/article/details/80062130
要实现前进刷新后退不刷新,要借助vue的keep-alive,一定要了解钩子函数的执行顺序。
不使用keep-alive
beforeRouteEnter --> created --> mounted --> destroyed
使用keep-alive
beforeRouteEnter --> created --> mounted --> activated --> deactivated
再次进入缓存的页面
只会触发beforeRouteEnter -->activated --> deactivated
注:
created和mounted不会再执行,所以要把数据的获取放在activated函数中。
我在使用keepalive时犯得一个错误就是把keepalive的值有时设为true,有时设为false,keepalive的值应该一直都为true,但是要判断是否是页面刷新,以及是否是后退的操作,来决定activated中函数是否需要重新加载,还是取之前缓存的数据。
beforeRouteEnter (to, from, next) {
if (from.name == 'detail') {//如果页面是后退的话
to.meta.isBack = true;//将isBack的标识改为true