第一种
如果这样子的话需要加上 /* @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 = state
sessionStorage.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 = name
localStorage.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-ignore
routes
})
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