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

前言

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

在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内容请搜索代码网以前的文章或继续浏览下面的相关文章希望大家以后多多支持代码网！