vue2.0 中keep-alive内容不刷新的问题

Z时代
2024-01-10
分类：技术分享

list组件向 detail组件跳转的时:

列表组件(list)从服务器端获取数据，列表详情页(detail)也会向服务器端发请求获取数据，为了避免每次都获取数据，我在router-view外层使用了keep-alive组件，避免每次都获取数据.

list.vue

<ul>
    <li v-for="(value, index) in getFilterData().data">
        <router-link(:to="'/article/' + index")>
          <span v-text="value.title"></span>
        </router-link>
    </li><ul>

detail.vue

<article v-html="details.content"></article>

export default {
    data(){
      return {
        query:'',
        details: ''
      }
    },
    created: function(){
      let self = this;
      Http({ //一个已封装好的util方法
        type: 'get',
        data:'',
        succ: function(body){
          self.details = body.content.list[self.$route.params['id']];
        }
      })    }

index.html

<div id="app">
  <transition :name="transitionName" mode="out-in">
      <keep-alive>
          <router-view></router-view>
      </keep-alive>
  </transition></div>

问题是，现在每次list向detail页面跳转之后，内容不更新，求教下如何更新数据，或者有其他的方式避免每次都重新请求数据？