在Vue项目练习中，测试发现从一个列表页面跳转到具体的详情页面时，只有第一次是成功跳转，之后的跳转都是走了浏览器缓存，文档总结了该问题的具体解决方法；

Vue页面跳转数据缓存问题

1. 发现问题

在Vue的项目中，测试当从一个新闻列表页面跳转到具体详情时，发现只有第一次点击能够有效跳转到新闻详情页面；若回退到列表页面后，再次点击，则会进入浏览器缓存的数据，因为控制台查看进入新闻详情页面不会发出新的请求；然后也查看了路由传递的参数是否正确传递，发现路由参数是正确的传递到了详情页面中，然后再查看这个Vue项目的App.vue文件，发现有可能是下面代码的中的<keep-alive>组件原因造成的，该组件是Vue的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染DOM：

<transition :name="routerTransition">
  <keep-alive>
    <router-view/>
  </keep-alive>
</transition>

2. 解决问题的方法

从上面的描述了解到出现新闻详情页面的数据没有发生变化的原因是由于<keep-alive>组件造成的，当第一次从列表页面进入详情页面时，进行了正确的请求，并展示数据，同时该页面的信息也保存到浏览器缓存中，当下次进入详情页面时，不会进行新的请求，造成数据没有正确展示，因而解决浏览器数据的缓存问题可以通过下面两种方式：

在新闻详情页面使用 Watch 检测路由变化，当路由变化时，执行自定义的函数，在页面中进行刷新操作，增加的代码如下：
1
2
3
4
5
6
7
watch: {
'$route': function (to, from) {
if (this.$route.name !== '/index/newsList' ) {
this.router.go(0)
}
}
}

修改路由规则，在路由规则中对页面是否进入缓存进行配置，使用时区分<keep-alive>组件，对于详情页面的路由规则代码增加代码：

const NewsDetail = () => import('@/views/NewsDetail')
const routes = [
  {
    path: '/index/list/detail',
    name: 'newsdetail',
    meta: {
      keepAlive: false,
    },
    component: NewsDetail,
  },
]
export default routes

在App.vue文件中，使用<keep-alive>组件增加对keepAlive属性的校验，如下：

<div id="app">
  <!-- 由于在后面页面使用中需要请求数据重新刷新，在路由规则中配置 meta {keepAlive: false} 属性，在此进行判断  -->
  <!-- 由于 transition 标签下只能有一个根元素，因而写成两个 transition 标签 -->
  <transition :name="routerTransition">
    <keep-alive>
      <router-view v-if= "$route.meta.keepAlive"/>
    </keep-alive>
  </transition>
  <transition :name="routerTransition">
      <router-view v-if= "!$route.meta.keepAlive"/>
  </transition>
</div>

3. 问题总结

这是一个关于浏览器缓存页面数据的问题，其中第一种方式是使用watch检测路由变化，该方法的不足之处就是当从详情页面返回到列表页面时，会出现列表页面的数据刷新，影响用户体验；因而建议采取第二种方式，对路由规则进行增加属性判断是否缓存该页面，能够有效地解决浏览器页面数据缓存造成的问题；