vue3動態(tài)路由解決刷新頁面空白或跳轉(zhuǎn)404問題

更新時間：2025年01月22日 08:31:28 作者：micefind

這篇文章主要為大家詳細(xì)介紹了vue3如何通過動態(tài)路由解決刷新頁面空白或跳轉(zhuǎn)404問題,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以了解下

前言

開發(fā)后臺管理系統(tǒng)時，有時后端會根據(jù)權(quán)限返回不同的菜單列表，前端需要異步獲取數(shù)據(jù)然后實時生成路由配置。

在vue3項目中，我們使用pinia、vue-router實現(xiàn)動態(tài)路由，關(guān)鍵步驟如下：

異步請求獲取路由接口數(shù)據(jù)；
pinia狀態(tài)管理保存路由信息；
vue-router實現(xiàn)路由配置；
動態(tài)添加路由。

1 異步請求獲取路由接口數(shù)據(jù)

// /src/api/route.js
export const getRouteList = () => {
  // 模擬異步請求
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve([
        {
          name: "home",
          path: "/home",
          meta: { title: "首頁" },
        },
        {
          name: "user",
          path: "/user",
          meta: { title: "用戶" },
        },
      ])
    }, 1000)
  })
}

2 pinia狀態(tài)管理保存路由信息

// /src/store/route.js
import { defineStore } from "pinia"

export const useRouteStore = defineStore("route", {
  state: () => ({
    routeList: sessionStorage.getItem("routeList")
      ? JSON.parse(sessionStorage.getItem("routeList"))
      : [],
    isUpdate: false,
  }),
  actions: {
    updateRouteList(routeList) {
      this.routeList = routeList
      sessionStorage.setItem("routeList", JSON.stringify(routeList))
      this.isUpdate = true
    },
  },
  getters: {},
})

3 vue-router實現(xiàn)路由配置

import { createRouter, createWebHashHistory } from "vue-router"

// 定義基本路由配置
const routes = [
  {
    path: "/:pathMatch(.*)",
    meta: { title: "404" },
    name: "404",
    component: () => import("@/views/error/404.vue"),
  },
  {
    path: "/login",
    name: "login",
    component: () => import("@/views/login/Login.vue"),
    meta: { title: "登錄" },
  },
  {
    path: "/",
    name: "layout",
    component: () => import("@/views/layout/Layout.vue"),
    redirect: "/home",
    children: [], // 初始時沒有子路由
  },
]

export const router = createRouter({
  history: createWebHashHistory(import.meta.env.BASE_URL),
  routes,
})

// 路由守衛(wèi)，用于處理路由跳轉(zhuǎn)前的邏輯
router.beforeEach(async (to, from, next) => {
  // 判斷是否已登錄且沒有 token，未登錄時重定向到登錄頁
  const token = localStorage.getItem("token")
  if (to.path !== "/login" && !token) {
    return next({ name: "login" })
  }
  next()
})

4 動態(tài)添加路由

核心代碼

router.addRoute("layout", {
	path: item.path,
	name: item.name,
	component: () => import(`@/views/${item.name}/index.vue`),
})

完整代碼

// /src/router/index.js
import { createRouter, createWebHashHistory } from "vue-router"
import { useRouteStore } from "@/store/route"
import { getRouteList } from "@/api/route"

// 定義基本路由配置
const routes = [
  {
    path: "/:pathMatch(.*)",
    meta: { title: "404" },
    name: "404",
    component: () => import("@/views/error/404.vue"),
  },
  {
    path: "/login",
    name: "login",
    component: () => import("@/views/login/Login.vue"),
    meta: { title: "登錄" },
  },
  {
    path: "/",
    name: "layout",
    component: () => import("@/views/layout/Layout.vue"),
    redirect: "/home",
    children: [], // 初始時沒有子路由
  },
]

export const router = createRouter({
  history: createWebHashHistory(import.meta.env.BASE_URL),
  routes,
})

// 添加動態(tài)路由
const addRoute = () => {
  const routeStore = useRouteStore()
  if (routeStore.isUpdate) {
    routeStore.routeList.forEach((item) => {
      if (!router.hasRoute(item.name)) {
        router.addRoute("layout", {
          path: item.path,
          name: item.name,
          component: () => import(`@/views/${item.name}/index.vue`),
        })
      }
    })
    routeStore.isUpdate = false
  }
}

// 初始化路由
export const initRouter = async () => {
  let routeList = sessionStorage.getItem("routeList")
    ? JSON.parse(sessionStorage.getItem("routeList"))
    : await getRouteList()
  const routeStore = useRouteStore()
  routeStore.updateRouteList(routeList)
  addRoute()
}

// 路由守衛(wèi)，用于處理路由跳轉(zhuǎn)前的邏輯
router.beforeEach(async (to, from, next) => {
  // 添加動態(tài)路由
  addRoute()
  // 判斷是否已登錄且沒有 token，未登錄時重定向到登錄頁
  const token = localStorage.getItem("token")
  if (to.path !== "/login" && !token) {
    return next({ name: "login" })
  }
  next()
})

注意：動態(tài)添加路由后刷新頁面會跳轉(zhuǎn)404頁面，因為在進路由守衛(wèi)之前，程序已經(jīng)進行了路由匹配，結(jié)果就是沒匹配到任何內(nèi)容。

解決方案：在router注冊之前調(diào)用initRouter函數(shù)初始化路由。

// main.js
import "./assets/css/main.css"

import { createApp } from "vue"
import { createPinia } from "pinia"
import App from "./App.vue"
import { initRouter, router } from "./router"

const app = createApp(App)

const call = async () => {
  app.use(createPinia())
  await initRouter()
  app.use(router)

  app.mount("#app")
}
call()

到此這篇關(guān)于vue3動態(tài)路由解決刷新頁面空白或跳轉(zhuǎn)404問題的文章就介紹到這了,更多相關(guān)vue3刷新頁面空白或404內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: