前端 - vue-router3动态路由刷新出现白屏?

Question

最近在使用vue-admin-template开发后台管理系统，遇到动态路由刷新出现页面白屏问题

用户登录时通过角色获取角色路由并动态加载到router对象

  login({ commit }, userInfo) {
    const { username, password } = userInfo;
    return new Promise((resolve, reject) => {
      login({ username: username.trim(), password: password })
        .then(async (response) => {
          // 本地存储;
          sessionStorage.setItem("user", JSON.stringify(response.data));
          const { data, token } = response;
          commit("SET_TOKEN", token);
          setToken(token);

          // 获取角色;
          const datas = await getUserRole();
          if (datas.role === 2) {
            router.addRoutes(adminRouters);
            commit("SET_ROUTER", adminRouters);
          } else {
            commit("SET_ROUTER", userRouters);
            router.addRoutes(userRouters);
          }    
          resolve();
        })
        .catch((error) => {
          console.log(error);
          reject(error);
        });
    });

在App.vue 中将保存于vuex中的路由信息刷新前存入到sessionStorage中，刷新后取出并重新加载路由;

<template>
  <div id="app">
    <router-view />
  </div>
</template>

<script>
import store from "@/store/index";
import { resetRouter } from "@/router/index";
export default {
  name: "App",
  beforeCreate() {
    try {
      if (sessionStorage.getItem("store")) {
        this.$store.replaceState(
          Object.assign(
            {},
            this.$store.state,
            JSON.parse(sessionStorage.getItem("store"))
          )
        );
//重置路由
        resetRouter(store.getters.router);
        sessionStorage.removeItem("store");
      }
    } catch (error) {
      console.log(error);
    }
    //在页面刷新时将vuex里的信息保存到sessionStorage里
    window.addEventListener("beforeunload", () => {
      sessionStorage.setItem("store", JSON.stringify(this.$store.state));
    });
  },
};
</script>

重置路由方法

import Vue from "vue";
import Router from "vue-router";
Vue.use(Router);

const createRouter = () =>
  new Router({
    // mode: 'history', // require service support
    scrollBehavior: () => ({ y: 0 }),
   // constantRoutes:静态路由数组
    routes: constantRoutes,
  });

export function resetRouter(ROUTES) {
  router = createRouter(); // reset router
  router.addRoutes(ROUTES);
}

全局路由守卫

import router from "./router";
import store from "./store";
import { Message } from "element-ui";
import NProgress from "nprogress"; // progress bar
import "nprogress/nprogress.css"; // progress bar style
import { getToken } from "@/utils/auth"; // get token from cookie
import getPageTitle from "@/utils/get-page-title";

NProgress.configure({ showSpinner: false }); // NProgress Configuration

const whiteList = ["/login"]; // no redirect whitelist

router.beforeEach(async (to, from, next) => {
  // start progress bar
  NProgress.start();

  // set page title
  document.title = getPageTitle(to.meta.title);

  // determine whether the user has logged in
  const hasToken = getToken();
  if (hasToken) {
    if (to.path === "/login") {
      // if is logged in, redirect to the home page
      next({ path: "/documentInfo" });
      NProgress.done();
    } else {
      const hasGetUserInfo = store.getters.name;
      if (hasGetUserInfo) {
        next();
      } else {
        try {
          // get user info
          await store.dispatch("user/getInfo");
          next({ ...to, replace: true });
        } catch (error) {
          // remove token and go to login page to re-login
          console.log(error);
          await store.dispatch("user/resetToken");
          Message.error(error || "Has Error");
          next(`/login?redirect=${to.path}`);
          NProgress.done();
        }
      }
    }
  } else {
    /* has no token*/

    if (whiteList.indexOf(to.path) !== -1) {
      // in the free login whitelist, go directly
      next();
    } else {
      // other pages that do not have permission to access are redirected to the login page.
      next("/login");
      NProgress.done();
    }
  }
});

router.afterEach(async (from, to) => {
  NProgress.done();
});

角色路由直接编写在JS文件中

// 路由形式
export const userRouters = [
  {
    path: "/document",
    component: Layout,
    name: "document",
    hidden: false,
    meta: { title: "档案资料", icon: "archives" },
    children: [
      {
        path: "/documentInfo",
        name: "documentInfos",
        component: () => import("@/views/document/index"),
        hidden: false,
        meta: { title: "个人档案" },
      },
      {
        path: "/documentInput",
        name: "documentInputs",
        component: () => import("@/views/document/admin/addorupdate"),
        meta: { title: "档案录入" },
      },
    ],
  },
 // 省略
  { path: "*", redirect: "/404", hidden: true },
];

出现问题正常登录能够进行路由跳转但是点击浏览器刷新出现页面白屏,请问该如何解决？

Answer 1

你的重置路由那里改一下
const router = createRouter()

export function resetRouter() {
const newRouter = createRouter()
router.matcher = newRouter.matcher // reset router
}

APP.vue中重置时，执行
resetRouter()
router.addRoutes(store.getters.router)

Answer 2

可以看看这个，希望可以帮助你解决问题：
https://blog.csdn.net/qq_40315210/article/details/129692160