vue3动态路由解决刷新页面空白或跳转404问题

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

这篇文章主要为大家详细介绍了vue3如何通过动态路由解决刷新页面空白或跳转404问题,文中的示例代码讲解详细,感兴趣的小伙伴可以了解下

前言

开发后台管理系统时，有时后端会根据权限返回不同的菜单列表，前端需要异步获取数据然后实时生成路由配置。

在vue3项目中，我们使用pinia、vue-router实现动态路由，关键步骤如下：

异步请求获取路由接口数据；
pinia状态管理保存路由信息；
vue-router实现路由配置；
动态添加路由。

1 异步请求获取路由接口数据

// /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状态管理保存路由信息

// /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实现路由配置

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,
})

// 路由守卫，用于处理路由跳转前的逻辑
router.beforeEach(async (to, from, next) => {
  // 判断是否已登录且没有 token，未登录时重定向到登录页
  const token = localStorage.getItem("token")
  if (to.path !== "/login" && !token) {
    return next({ name: "login" })
  }
  next()
})

4 动态添加路由

核心代码

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,
})

// 添加动态路由
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()
}

// 路由守卫，用于处理路由跳转前的逻辑
router.beforeEach(async (to, from, next) => {
  // 添加动态路由
  addRoute()
  // 判断是否已登录且没有 token，未登录时重定向到登录页
  const token = localStorage.getItem("token")
  if (to.path !== "/login" && !token) {
    return next({ name: "login" })
  }
  next()
})

注意：动态添加路由后刷新页面会跳转404页面，因为在进路由守卫之前，程序已经进行了路由匹配，结果就是没匹配到任何内容。

解决方案：在router注册之前调用initRouter函数初始化路由。

// 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()

到此这篇关于vue3动态路由解决刷新页面空白或跳转404问题的文章就介绍到这了,更多相关vue3刷新页面空白或404内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

利用HBuilder打包前端开发webapp为apk的方法
下面小编就为大家带来一篇利用HBuilder打包前端开发webapp为apk的方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-11-11
Vue应用中使用xlsx库实现Excel文件导出的详细步骤
本文详细介绍了如何在Vue应用中使用xlsx库来导出Excel文件,包括安装xlsx库、准备数据、创建导出方法、触发导出操作和自定义Excel文件等步骤,xlsx库提供了强大的API和灵活的自定义选项,使得处理Excel文件变得简单而高效
2024-10-10
vue实现pdf导出解决生成canvas模糊等问题(推荐)
最近公司项目需要，利用vue实现pdf导出，从而保存到本地打印出来，说起来好像也很容易，具体要怎么实现呢？下面小编给大家带来了vue实现pdf导出解决生成canvas模糊等问题，需要的朋友参考下吧
2018-10-10
vue设计一个倒计时秒杀的组件详解
这篇文章主要介绍了vue设计一个倒计时秒杀的组件，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-04-04
Vue使用高德地图选点定位搜索定位功能实现
这篇文章主要介绍了Vue使用高德地图选点定位搜索定位功能,文中给大家提到了常见问题解决方法，本文结合实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2022-10-10
详解vue-cli3 中跨域解决方案
这篇文章主要介绍了vue-cli3 中跨域解决方案，非常不错，具有一定的参考借鉴价值 ,需要的朋友可以参考下
2019-04-04
Vue echarts实例项目商家销量统计图实现详解
Echarts，它是一个与框架无关的 JS 图表库，但是它基于Js，这样很多框架都能使用它，例如Vue，估计IONIC也能用，因为我的习惯，每次新尝试做一个功能的时候，总要新创建个小项目，做做Demo
2022-09-09
Vue实现路由跳转和嵌套
本篇文章主要介绍了Vue实现路由跳转和嵌套，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-06-06
vue.config.js完整配置教程
这篇文章主要为大家介绍了vue.config.js的完整配置教程，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-08-08
vue实现三级导航展示和隐藏
这篇文章主要为大家详细介绍了vue实现三级导航展示和隐藏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-08-08