refreshPlugin - 路由刷新

什么是 refreshPlugin？

refreshPlugin 是一个用于路由刷新的插件。它提供了统一的路由刷新机制，让页面内容更新变得更加灵活和可控。

启用插件

import { refreshPlugin } from '@pro/router'

const router = createRouter({
  // ... 其他配置
  plugins: [
    refreshPlugin()
  ]
})

在组件中

<template>
  <router-view v-slot="{ Component }">
    <component
      :is="Component"
      :key="$router.getRouteKey()"
    />
  </router-view>
</template>

刷新当前页路由

<template>
  <n-button @click="$router.refresh()">刷新当前页路由</n-button>
</template>

使用 path 刷新

INFO

需填写完整路由地址，不需要考虑 route.query 部分

const routes = [
  {
    path:'/user',
    component: () => import('@/views/system/user/index.vue')
  }
]

<template>
  <n-button @click="$router.refresh('/user')">使用 path 刷新</n-button>
</template>

使用 name 刷新

INFO

需在路由中配置 name 属性

const routes = [
  {
    path:'/user',
    name: "User",
    component: () => import('@/views/system/user/index.vue')
  }
]

<template>
  <n-button @click="$router.refresh('User')">使用 name 刷新</n-button>
</template>