快捷導(dǎo)航

vue3動態(tài)路由刷新后空白或者404問題的解決

更新時間：2022年07月18日 09:47:11 作者：梧桐凰

在vue項目中采用動態(tài)添加路由的方式,第一次進入頁面會正常顯示,但是點擊刷新頁面后會導(dǎo)致頁面空白,所以下面這篇文章主要給大家介紹了關(guān)于vue3動態(tài)路由刷新后空白或者404問題的解決方法,需要的朋友可以參考下

前言

之前用vue+ant-design-vue寫了一個動態(tài)路由的頁面，更新看一下不能用了555~~~

之前用的組件版本不知道了，回退也不知道哪個版本合適，就是用"vue": "^3.2.13" , "vue-router": "^4.0.3","vuex": "^4.0.0"，ant-design-vue": "^3.2.5"重新寫一個吧。

本文章是看了其它雜七雜八的博客，自己排錯后編寫下，不容易啊

實現(xiàn)

1.首先在store\index.js文件編寫

import { createStore } from 'vuex'

export default createStore({
  state: {
    menu_lists: []  //菜單
  },
  getters: {
    account(state) {
      return state.menu_lists  // 讀取菜單列表
    }
  },
  mutations: {
    // 增加菜單
    menuAdd(state, n) {
      if (state.menu_lists.length == 0) {
        state.menu_lists.push(n)
      } else {
        if (state.menu_lists.some(menu => menu.name != n.name)) {
          state.menu_lists.push(n)
        }
      }
    },
    // 清空菜單
    menuDelect(state) {
      state.menu_lists.length = 0
    }
  },
  actions: {
    menu_add({ commit }, data) {
      commit('menuAdd', data)
    },
	// 登出時調(diào)用將菜單數(shù)據(jù)刪除
    menu_delect({ commit }) {
      commit('menuDelect')
    }
  },
  modules: {
  }
})

2.接著在App.vue編寫

原因: 刷新時,動態(tài)路由需要重新掛載到路由實例, 但是在App.vue中調(diào)用init方法去初始化,并不能解決,因為App.vue屬于路由的根,還未進入就被通配符攔截到404頁面了，我就在根上退出時將菜單保存在sessionStorage

// 創(chuàng)建完畢狀態(tài)
  created() {
//在頁面加載時讀取sessionStorage里的狀態(tài)信息
    if (sessionStorage.getItem("store")) {
      this.$store.replaceState(
        Object.assign(
          {},
          this.$store.state,
          JSON.parse(sessionStorage.getItem("store"))
        )
      );
    }
    //在頁面刷新時將vuex里的信息保存到sessionStorage里
    window.addEventListener("beforeunload", () => {
      sessionStorage.removeItem("store");
      sessionStorage.setItem("store", JSON.stringify(this.$store.state));
    });
 }

3.讀取后端菜單文件進行處理下

根據(jù)實際修改

vueRouter4中移除了addRouters,所以只能通過addRouter進行路由的動態(tài)添加

import { useRouter } from "vue-router";
import { useStore } from "vuex";
export default defineComponent({
    setup() {
    const store = useStore();
    const router = useRouter();
        // 路由數(shù)據(jù)重新封裝
    function routerPackag(routers) {
      let accessedRouters = routers.filter((itemRouter) => {
        if (itemRouter.component != "Layout") {
          //處理組件---重點
          router.addRoute("base", {
            path: `/${itemRouter.path}`,
            name: itemRouter.name,
            component: () => import(`@/${itemRouter.component}`),
          });
          // 通過sessionStorage排查菜單是否存儲，避免刷新后重復(fù)添加
          if (!sessionStorage.getItem("store")) {
            store.dispatch("menu_add", itemRouter);
          }
        }
        //存在子集
        if (itemRouter.children && itemRouter.children.length) {
          routerPackag(itemRouter.children);
        }
        return true;
      });
      return accessedRouters;
    }
   }
)}

4.主要的來了，可以main或者router\index編寫（我是在router\index編寫的）

1、刷新404：將匹配全部為定義路徑到404的路由從靜態(tài)路由表中去除，在動態(tài)權(quán)限路由都添加了之后在添加。

2、刷新白屏：如果是在路由守衛(wèi)router.beforeEach中檢測并用router.addRoute添加的路由，則需要將動態(tài)權(quán)限路由添加后的next()放行，改為next({ path: ${to.path} })觸發(fā)新導(dǎo)航。

import { createRouter, createWebHashHistory } from 'vue-router'
import store from "../store";
import { ref } from 'vue'
const routes = [
  {
    path: '/login',
    name: 'login',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import( /* webpackChunkName: "Login" */ '../views/ant_login.vue'),
    meta: {
      requireAuth: false,
    },
  },
  {
    path: '/',
    name: 'base',

    component: () => import( /* webpackChunkName: "Login" */ '../views/ant_base.vue'),
    meta: {
      requireAuth: true,
    },
    children: [
      {
        path: 'index',
        name: 'home',
        redirect: "/map",
        component: () => import( /* webpackChunkName: "Login" */ '../views/ant_home.vue'),
      }
    ]
  },
  {
    name: "NotFont",
    path: '/:pathMatch(.*)*',
    component: () => import('../components/NotFont.vue'),
    alias: '/404', // 別名
    hideMenu: true
  }
]

const router = createRouter({
  history: createWebHashHistory(), //createWebHashHistory是hash模式
  // 頁面刷新白屏問題
  // mode取值說明：
  // histroy：URL就像正常的 url，示例：http://localhost:8080/home
  // hash：默認(rèn)值，會多一個“#”，示例：http://localhost:8080/#/home
  // abstract”：url不變示例：http://localhost:8080
  // mode: 'history',
  base: process.env.BASE_URL,
  routes
})
// 下面全局前置路由守衛(wèi)可在main文件編寫
const registerRouteFresh = ref(true) // 定義標(biāo)識，記錄路由是否添加
router.beforeEach(async (to, from, next) => {
  if (registerRouteFresh.value && store.state.menu_lists.length > 0) {
    router.removeRoute("NotFont")
    await store.state.menu_lists.forEach(e => {
      // 
      // 處理組件---重點
      router.addRoute("base", {
        path: `/${e.path}`,
        name: e.name,
        component: () => import(`@/${e.component}`),
      });
    })
    registerRouteFresh.value = false
    // next({ ...to, replace: true })
    next({
      path: `${to.path}`
    })
  } else {
    router.addRoute(router.options.routes[2])
    next()
  }
})

// 全局后置鉤子-常用于結(jié)束動畫等
router.afterEach(() => {
  //不接受next
});
export default router

登出頁面需要清除緩存

import { useStore } from "vuex";
export default defineComponent({
    setup() {
    const store = useStore()
    function Logout() {
    // 將vuex的菜單數(shù)據(jù)刪除
    store.dispatch("menu_delect");
       window.sessionStorage.clear()
   }
)}