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

Z时代
2024-03-04
分类：IT

最近在使用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 },
];