const menuList: object = [
{
"id": 1000,
"parentId": 0,
"icon": "AppleFilled",
"name": "组织架构",
"path": "",
"component": "Layout",
"redirect": null,
"type": "0",
"children": [{
"id": 1100,
"parentId": 1000,
"children": [],
"icon": "ToolFilled",
"name": "用户管理",
"path": "/Organization/user",
"component": "views/Organization/user/index",
"redirect": null,
"type": "0",
},
{
"id": 1200,
"parentId": 1000,
"children": [],
"icon": "ToolFilled",
"name": "部门管理",
"path": "/Organization/department",
"component": "views/Organization/department/index",
"redirect": null,
"type": "0",
}]
}]
路由基本安装这儿就不讲了,不会自己百度,都很简单
2. router文件夹结构
3. 创建静态路由(staticRouter.ts)
const staticRouter =[
{
path: '/login',
name: 'login',
component: () => import('@/views/Login/index.vue'),
},
{
path: '/404',
name: '404',
component: () => import('@/views/other/404.vue'),
},
]
export default staticRouter
const MainRouter = [
{
path: '/',
name: 'main',
component: () => import('@/Layout/Main.vue'),
redirect: { name: 'home' },
meta: { title: "首页" },
children: [
{
name: 'home',
path: '/home',
component: () => import('@/views/Home/index.vue'),
}
],
},
]
export default MainRouter
import { createRouter, createWebHistory } from 'vue-router'
const routerHistory = createWebHistory()
import NProgress from 'nprogress' // 加载进度条
import 'nprogress/nprogress.css'
import staticRouter from './staticRouter' // 独立页面
import MainRouter from './MainRouter' //模块路由(基于主入口布局页面)
import useStore from '@/store' //使用vuex
import * as user from "@/api/user"; //请求api,获取菜单
import Main from '@/Layout/Main.vue' // 导入动态路由父路由
import {isURL} from '@/utils/validate' //根据自己情况使用,主要判断是不是一个以https||http开头的链接
const router = createRouter({
history: routerHistory, //路由模式
routes: [
...staticRouter, //注册静态路由
...MainRouter //注册动态路由入住路由
]
})
// 格式化路由 //将后台返回的路由注册到router中(根据自己后台返回结构数据自己定义,仅做参考)
export function formatRouter(data: []) {
return data.map((item: any) => {
let i = 0
const route = {
name: item.path || `l-${item.id}`,
path: '',
component: '',
meta: {
title: item.name,
iframeURL: '',
icon: item.icon,
level: i += 1
},
redirect: '',
children: []
} as any
if (isURL(item.path)) {
route['name'] = 'iframeURL-' + item.id
route['path'] = item.path
route['meta']['iframeURL'] = item.path
}else {
route['path'] = item.path === '' ? `/l-${item.id}` : item.path
route['component'] = item.path === '' ? Main : () => import(`../${item.component}.vue`)
route['isMain'] = item.path === '' ? false : true
}
if (item.children && item.children.length > 0) {
route.children = formatRouter(item.children)
}
return route
})
}
router.beforeEach((to, from, next) => {
// 开启进度条
NProgress.start()
//解决子路由刷新出现空白
if (useStore.getters.permissions.length === 0) {
user.getList().then((res:any)=>{
const Router = formatRouter(res)
useStore.commit('SET_PERMISSIONS',Router)
console.log(Router);
Router.forEach(item => {
if (item.isMain){
router.addRoute('main',item)
}else {
router.addRoute(item)
}
})
// 如果 addRoute 并未完成,路由守卫会一层一层的执行执行,直到 addRoute 完成,找到对应的路由
next({ ...to, replace: true })
})
} else {
next()
}
})
router.afterEach((to,from) => {
// 关闭进度条
NProgress.done()
})
export default router
- 将路由挂在到app上
import { createApp } from 'vue'
import App from '@/App.vue'
import "@/index.css";
import router from '@/router'
const app =createApp(App)
import store from '@/store'
import * as Icons from "@ant-design/icons-vue";
// import ElementPlus from 'element-plus'
// app.config.globalProperties.vueEvent = vueEvent
// app.use(ElementPlus, { size: 'small', zIndex: 3000 })
//挂在
app.use(store)
app.use(router)
const data:any = Icons
for (const i in data) {
app.component(i, data[i]);
}
app.mount('#app')
原文地址:https://blog.csdn.net/weixin_44110728/article/details/123574013
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若转载,请注明出处:http://www.7code.cn/show_38088.html
如若内容造成侵权/违法违规/事实不符,请联系代码007邮箱:suwngjj01@126.com进行投诉反馈,一经查实,立即删除!
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。