vue用户点进详情页再返回列表页，停留在原位置

在 Vue 中使用 <keep-alive> 来缓存组件确实可以提高用户体验，尤其是在移动应用中。然而，有时候你可能希望某些页面在每次访问时都重新加载，而不是使用缓存的版本。为了实现这一点，你可以结合 key 属性和 Vue Router 的导航守卫来控制哪些页面应该刷新。

方法一: 使用 key 属性

Vue 的 <keep-alive> 组件有一个特性：如果被包裹的组件的 key 发生变化，那么它将会被视为一个新的实例，并且不会从缓存中获取。因此，你可以利用这个特性，在需要刷新的页面上动态改变 key 的值。

<template>
  <div id="app">
    <keep-alive>
      <router-view v-if="$route.meta.keepAlive" :key="$route.fullPath"></router-view>
    </keep-alive>
    <router-view v-if="!$route.meta.keepAlive"></router-view>
  </div>
</template>

在这个例子中，v-if="$route.meta.keepAlive" 和 :key="$route.fullPath" 确保了只有那些设置了 meta.keepAlive 的路由才会被 <keep-alive> 包裹，并且每当路径发生变化时（即用户导航到不同的URL），即使是在同一个页面内，也会强制刷新该页面，因为 key 值发生了变化。

方法二：利用 Vue Router 导航守卫

如果你想要更细粒度地控制页面刷新，比如仅在特定条件下刷新页面，你可以使用 Vue Router 的导航守卫。例如，当用户从详情页返回列表页时刷新列表页的数据：

1. 设置路由keepAlive:true

{
    path: '/investigate',
    name: 'investigate',
    component: () => import('../views/investigate/index.vue'),
    meta: {
        keepAlive: true
    }
},

2. 列表组件中根据情况判断是否刷新

// 在列表页面组件中
export default {
  // 评价按钮点击跳转
  evaluate() {
    this.needsRefresh = true;

    this.$router.push({
      path:'/satisfactionScore',
      query: {
        inspectId: inspectId
      }
    })
  },
  
  // ...
  activated() {
    // 当组件激活时触发，可以在这里检查是否需要刷新数据
    if (this.needsRefresh) {
      this.fetchData();
      this.needsRefresh = false;
    }
  },
  beforeRouteLeave(to, from, next) {
    // 设置一个标志，表示下一次激活时需要刷新
    this.needsRefresh = true;
    next();
  }
  // ...
};

或者，如果你想在进入某个特定页面时总是刷新，可以在路由配置中添加一个 beforeEnter 守卫：

{
  path: '/refreshPage',
    component: RefreshComponent,
    beforeEnter: (to, from, next) => {
    // 这里可以执行任何逻辑，比如清除缓存或设置标志位
    next();
  }
}

方法三：动态设置 meta 字段

最后，如果你想更灵活地控制哪些页面应该刷新，可以在路由定义中动态设置 meta 字段，然后在全局导航守卫中根据这些字段来决定是否刷新页面：

const router = new VueRouter({
  routes: [
    {
      path: '/',
      name: 'home',
      component: HomeComponent,
      meta: { refreshOnEnter: true } // 可以根据需要设置
    },
    // 其他路由...
  ]
});

router.beforeEach((to, from, next) => {
  if (to.meta.refreshOnEnter) {
    // 如果目标路由需要刷新，则在这里执行刷新逻辑
    // 比如调用组件的方法或者清除缓存等
  }
  next();
});

综上所述，通过合理使用 key 属性、Vue Router 导航守卫以及动态设置路由的 meta 字段，你可以在使用 <keep-alive> 缓存大部分页面的同时，仍然能够有选择性地刷新特定页面。这样既能提升性能又能满足业务需求。