vue3 标签页路由手动刷新实现

效果展示

实现思路

• 点击刷新按钮时，获取当前标签的路由信息
• 在标签页缓存中删除该标签页，并展示loading状态
• 将路由跳转至固定的Redirect页面,并将需要刷新的路由path或者name以参数形式带到Redirect页面中
• 在Redirect，根据接收到的路由path或者name，返回待刷新页面，以达到页面重新加载的效果

具体实现

• 点击刷新按钮时，获取当前标签的路由信息,在标签页缓存中删除该标签页，

  async refreshPage(router: Router) {
        const { currentRoute } = router;
        const route = unref(currentRoute);
        const name = route.name;
  ​
        const findTab = this.getCachedTabList.find((item) => item === name);
        if (findTab) {
          this.cacheTabList.delete(findTab);
        }
        const redo = useRedo(router);
        await redo();
      }
  

• 将路由跳转至固定的Redirect页面,并将需要刷新的路由path或者name以参数形式带到Redirect页面中

  export const useRedo = (_router?: Router) => {
    const { push, currentRoute } = _router || useRouter();
    const { query, params = {}, name, fullPath } = unref(currentRoute.value);
    function redo(): Promise<boolean> {
      return new Promise((resolve) => {
        if (name === REDIRECT_NAME) {
          resolve(false);
          return;
        }
        if (name && Object.keys(params).length > 0) {
          params['_redirect_type'] = 'name';
          params['path'] = String(name);
        } else {
          params['_redirect_type'] = 'path';
          params['path'] = fullPath;
        }
        push({ name: REDIRECT_NAME, params, query }).then(() => resolve(true));
      });
    }
    return redo;
  };
  

• 展示页面loading状态

  <div class="h-full ease-in-out" v-loading="loading">
      <router-view v-slot="{ Component, route }">
        <transition
          name="fade-slide"
          mode="out-in"
          :appear="true"
          @before-leave="handleBeforeLeave"
          @after-enter="handleAfterEnter"
        >
          <keep-alive :include="getCaches">
            <component :is="Component" v-if="menuStore.reloadFlag" :key="route.fullPath" />
          </keep-alive>
        </transition>
      </router-view>
    </div>
  

   const getCaches = computed((): string[] => {
      return menuStore.getCachedTabList;
    });
    function handleBeforeLeave() {
      loading.value = true;
    }
    function handleAfterEnter() {
      loading.value = false;
    }
  

• 在Redirect，根据接收到的路由path或者name，返回待刷新页面，以达到页面重新加载的效果

  const { currentRoute, replace } = useRouter();
  ​
    const { params, query } = unref(currentRoute);
    const { path, _redirect_type = 'path' } = params;
    // Reflect 是一个内置的对象,有has,get,set,deleteProperty,defineProperty等静态方法
    Reflect.deleteProperty(params, '_redirect_type');
    Reflect.deleteProperty(params, 'path');
  ​
    const _path = Array.isArray(path) ? path.join('/') : path;
  ​
    if (_redirect_type === 'name') {
      replace({
        name: _path,
        query,
        params,
      });
    } else {
      replace({
        path: _path.startsWith('/') ? _path : '/' + _path,
        query,
      });
    }
  

完整代码 如果觉得文章对你有帮助，欢迎一键三连