1. 新建一個(gè)reload.vue

跳轉(zhuǎn)到當(dāng)前頁(yè)面后，重定向回原來(lái)頁(yè)面。

<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
  beforeRouteEnter(to, from, next) {
    // next({ ...from, replace: true }) 無(wú)法刷新keepAlive
    next((vm: any) => {
      // 獲取當(dāng)前Vue實(shí)例，調(diào)用setup定義的replaceRouter方法
      // Vue2可以直接vm.$router.replace(from.fullPath)
      vm.replaceRouter(from.fullPath)
    })
  },
  setup() {
    const router = useRouter()
    // setup才能獲取到路由方法
    const replaceRouter = (url: string) => {
      router.replace(url)
    }
    // 暴露方法
    return { replaceRouter }
  }
})
</script>

2. 添加路由地址

  {
    path: '/reload',
    name: 'reload',
    component: Layout,
    redirect: '/reload/reload-page',
    meta: {
      hidden: true
    },
    children: [
      {
        path: '/reload/reload-page',
        name: 'reload-page',
        component: () => import('@/views/reload.vue'),
        meta: {
          title: 'reload-page',
          hidden: true,
          icon: ''
        }
      }
    ]
  }

3. 跳轉(zhuǎn)到reload，刷新當(dāng)前路由

  // 先清除當(dāng)前頁(yè)面keepAlive的include緩存
  delCachedView(route)
  // 跳轉(zhuǎn)到reload
  router.replace({
    path: '/reload/reload-page'
  })