当前位置：首页 > news >正文

在 vue3 中动态路由问题记录

news 来源：原创 2024/9/21 4:36:38

第一种

如果这样子的话需要加上 /* @vite-ignore / ,但是在这样用这行部署服务器上跳转会有问题

component: () => import(/ @vite-ignore */ '../views/' + e.component + '.vue')

第二种

  // 解决跳转问题const modeules = imporet.meta.glob('@/views/**/**.vue')component: modules['../views/' + e.component +'.vue']

其实这是vite的原因导致的，他在编译的是没有处理这种情况所以报错

完整代码

addRoute.ts

const pages = import.meta.glob('@/views/**/**.vue')import router from '@/router/index'
import type { RouteRecord } from 'vue-router'export interface LoginInfo {id?: Number,title: String,icon: String,path?: String,name: String,component: String,children?: [],
}export function addRoute(list: any[]) {list.forEach((menu: { children: any[] }) => {if (menu.children) {menu.children.forEach((e: any) => {if (!e.component) {return}router.addRoute('index', {name: e.name,path: e.path,meta: {icon: e.icon,title: e.title,fatherTitle: menu.title,fatherPath: menu.children[0].path,dynamic: true},component: pages['/src/views/' + e.component + '.vue']})if (e.children.length) {addRoute(e.children)}})}})// console.log(router.getRoutes());}export function removeRoute() {router.getRoutes().forEach((v: RouteRecord) => {if (v.meta.dynamic) {router.removeRoute(v.name as string)}})
}

menus.ts

// @src/store/menus.ts
import { defineStore } from 'pinia'
import { ref } from 'vue';
import { addRoute } from './addRoute'
import { routes } from '@/router/index'
import { getMenuList } from "@/api/login"interface AddRoute {id?: Number,title: String,icon: String,path?: String,name: String,component: String,children?: [],
}export const useMeanStore = defineStore('mean', () => {// 菜单数据const menuList = ref([] as AddRoute[])// 权限数据const permList = ref([])// 是否有路由const hasRoute = ref(false)// 改变路由状态function changeRouteStatus(state: any) {hasRoute.value = statesessionStorage.setItem("hasRoute", state)}// 设置菜单数据function setMenuList(menus: any) {let addRouterList = routes.filter(route => !route?.meta?.notDetect)menuList.value = [...addRouterList, ...menus]// 生成动态路由addRoute(menus)}// 获取菜单function getMenu() {return getMenuList().then((res: any) => {setMenuList(res.data.nav);setPermList(res.data.authoritys)})}// 设置权限数据function setPermList(authoritys: any) {permList.value = authoritys}return {menuList,permList,hasRoute,changeRouteStatus,setMenuList,setPermList,getMenu}
})

user.ts

// @src/store/user.ts
import { defineStore } from 'pinia'
import { logout } from '@/api/login'
import { ref } from 'vue';export const useUserStore = defineStore('user',() => {const token = ref("")const userInfo = ref({})function SET_TOKEN(name: string) {token.value = namelocalStorage.setItem("token", name)}function SET_INFO(user: any) {userInfo.value = user}async function remove() {await logout()localStorage.clear()sessionStorage.clear()location.reload()SET_INFO({})}return {persist: true,token,userInfo,remove,SET_TOKEN,SET_INFO}}
)

index.ts

import { useMeanStore } from './menus'
import { useUserStore } from './user'export { useUserStore, useMeanStore }

router.ts

import { createRouter, createWebHashHistory, createWebHistory } from 'vue-router'
import Layout from '@/components/Layouts/index.vue'import { useMeanStore } from '@/stores/routes/menus'import NProgress from 'nprogress'
import '/node_modules/nprogress/nprogress.css'
NProgress.configure({ showSpinner: true })export const routes = [{path: '/login',name: 'login',component: () => import('@/views/login/login.vue'),meta: {notDetect: true}},{path: '/404',name: 'NotFound',component: () => import('@/views/404/error.vue'),meta: {title: 'Page not found',notDetect: true}},// 所有未定义路由，全部重定向到404页{path: '/:catchAll(.*)',redirect: '/404',meta: {title: 'Page not found',notDetect: true}},{path: '/',name: 'index',component: Layout,redirect: '/home',title: '首页',icon: 'home',children: [{path: '/home',name: 'home',title: '首页',icon: 'el-icon-s-home',component: () => import('@/views/home/index.vue'),children: [],}],},
]const router = createRouter({// 刷新时，滚动条位置还原scrollBehavior: () => ({ left: 0, top: 0 }),history: createWebHashHistory(import.meta.env.BASE_URL),// @ts-ignoreroutes
})router.beforeEach((to, from, next) => {NProgress.start()let token = localStorage.getItem("token")const useMean = useMeanStore()// console.log('hasRoute', useMean.hasRoute)if (to.meta.notDetect) {// 不需要检测的页面 直接放行next()} else if (!token) {// console.log("还没有token!!!")next({ path: "/login" })} else {// console.log("已经有路由了")next()}
})router.afterEach(() => {setTimeout(() => {NProgress.done()}, 300)
})
export default router