上面的问题出现之后, 我们分析一下其结果可以简化成我们想要的功能是这样的
列表页中的数据, 我希望, 如果是从详情页跳回来的时候就把页面内容给缓存下来,如果是从首页跳转过来的时候, 就要重新请求数据, 不要缓存
解决步骤
- 先把详情页跳转到列表页的问题给解决了
当我们从详情页跳回到列表页的时候, 总是给我们跳回到了分页的第一页, 这样的体验对用户来说肯定是不好的, 所以这个问题我们可以在 router-view 加上 keep-alive
这是我的真实项目中的代码, 其中 keep-alive :include 表示数组中的列表页会被 缓存,这里提醒一下,数组中的值是 组件中的 name 属性的值 - 当上一步做好了之后, 你会发现, 当我从第n页的任何一个详情跳回的时候, 不会再是第一页了, 这就是我们要的, 然后,Bug 也就出来了, 当我们从首页点击 跳转到列表页的时候, 列表页也被显示成了第N页 (脑瓜子嗡嗡的, 修好了这头, 把那头给搞坏了)
思考ing
如果我能得到页面的路由信息就可以, 判断一下路由, 如果是从首页过来的路由, 就执行一下页面初始化的方法, 如果是从详情页过来的内容, 就不让它执行就可以了
于是想到了全局路由守卫(这个不可取)和 页面级的路由守卫 (beforeRouterEnter)
就使用 beforeRouterEnter(to,from,next) 这个方法是可以得到路由的,可以知道路由是从哪里来的, 但是我们说的, 知道了从哪里来的之后, 来决定要执行页面上的方法, 呵呵了, 咋执行页面的方法呢, 这个路由守卫中 可是没有 页面this 的, this.methodXXX 你怎么好意思在人家路由守卫中调用呢?
再思考ing
路由守卫说,我调用不了方法, 但是我可以在路由信息中写点东西把火种信息传下去, 后面的生命周期函数在调中时, 先看一下 this.$rotue中的信息,就可以看到路由守卫想传的话了。 所以, 我们可以在路由守卫中的 mate 中加上一个参数, 来说明是不是要刷新面页, 调用方法
常识 当一个页面被加上了 keep-alive 它就会多一个 生命周期函数 activated 方法
要不要重新加载数据, 就要在 activate方法中判断
下面是主要位置的代码