建立门户网站的费用,建站快车的优点,郑州冬青街 网站建设,wordpress登录不记住 一级(el-sub-menu)的都是只是展示的 点击跳转的都是一级下的子级(el-menu-item) 完整展示
1:在登陆功能进行登陆 获取menu列表 注册路由表的时候 把文件进行创建好 因为注册的方法需要获取这个路径 整个router下的main product等等都要创建 //1:发送你的用户名和密码获…
记住 一级(el-sub-menu)的都是只是展示的 点击跳转的都是一级下的子级(el-menu-item) 完整展示
1:在登陆功能进行登陆 获取menu列表 注册路由表的时候 把文件进行创建好 因为注册的方法需要获取这个路径 整个router下的main product等等都要创建 //1:发送你的用户名和密码获取token和用户信息**
//2:拿着token获取菜单列表接口 (我的项目封装的axios 这里演示的话就写这么个意思 知道就行)**const userMenuDataawait axios.get(xxxx{token:xxxxx}) //3:保存在 vuex中//4:把菜单权限注入到路由表内const mapMenusToRouters(userMenus: any[]) {console.log(userMenus, userMenus)// type1说明有二级 type2 就是二级// 保存处理好的路由。const routes: RouteRecordRaw[] [];// 获取所有的路由文件const allRoutes: RouteRecordRaw[] [];// 1先查询路由目录文件 获取main下的ts文件 const routeFiles require.context(../router/main, true, /\.ts/)// 2 获取keys() 引入文件routeFiles.keys().forEach(key {// 3切割文件./ .ts const route require(../router/main key.split(.)[1])// 4 把文件追加到数组 allRoutes中allRoutes.push(route.default)});const _recurseGetRoute (menus: any[]) {for (const menu of menus) {if (menu.type 1) {_recurseGetRoute(menu.children ?? [])} else {// type2 没有了子集const route allRoutes.find((route) {return route.path menu.url})if (route) {routes.push(route)} }}} _recurseGetRoute(userMenus)if (routes) {return routes} else {return []}}//记得 import {useStore} from store;const store useStore(); const userMenu computed(() {return store.state.login.userMenus;}); //调用函数进行处理
const routes mapMenusToRouters(userMenus)//放在router.ts的main 下的children中路由表注册完毕
routes.forEach((key: RouteRecordRaw) router.addRoute(main, key) )2侧边菜单界面
templatediv classnav-menudiv classlogoimg classimg src~/assets/img/logo.svg altlogo /span classtitle vue3ts/span/divel-menu:default-activedafaultValuebackground-color#0c2135text-color#b7bdc3:collapseisCollapseactive-text-color#0a60bdclassel-menu-verticaltemplate v-foritem in userMenu :keyitem.idtemplate v-ifitem.type 1el-sub-menu :indexitem.id template #titleel-iconPlatform //el-iconspan{{ item.name }}/span/templatetemplate v-forsubItem in item.children :keysubItem.idel-menu-item:indexsubItem.id clickhandleMenuItemClick(subItem)template #titleel-iconPlatform //el-iconspan{{ subItem.name }}/span/template/el-menu-item/template/el-sub-menu/templatetemplate v-else-ifitem.type 2el-menu-item :indexitem.id span{{ item.name }}/span/el-menu-item/template/template/el-menu/div
/template
script setup langts
import { useRouter, useRoute } from vue-router;import { useStore } from /store/index;//1:vuex获取菜单列表 const store useStore(); const userMenu computed(() {return store.state.login.userMenus;}); //2:点击el-menu-item上的按钮跳转的函数const router useRouter();const handleMenuItemClick (item: any) {// item.url不存在就跳转到自己定义的界面 比如404 (/not-found)router.push({ path: item.url ?? /not-found });
};
//3: el-sub-menu上有一个属性是dafaultValue
// 意思是默认选择的路由菜单 不能写死 不然我刷新的时候 就不能显示当前的选中菜单而是选中写死的菜单
// 比如 我写死的dafaultValue是用户管理当前点击菜单管理进行刷新数据的时候 他会跑到用户管理里面 这是错误的const pathMapToMenus (userMenu: any[], currentPath: string): any {for (const menu of userMenu) {// 如果type1 那么就是含有二级if (menu.type 1) {console.log(menu)// 调用函数本身 把结果返回给我const findMenu pathMapToMenu(menu.children ?? [], currentPath)if (findMenu) {return findMenu}// 如果type2 那么直接判断后把结果返回给我} else if (menu.type 2 currentPath menu.url) {console.log(menu, 2)return menu}}
}const route useRoute();const currentPath route.path;const menu pathMapToMenu(userMenu.value, currentPath);const dafaultValue ref(menu.id );
/script以上把侧边菜单展示实现了 但是实现跳转的话 路由表必须有相对应的路由
router/index.ts
import { createRouter, createWebHashHistory, RouteRecordRaw } from vue-router
import { accountLoginRequest, RequestUserInfoByid, RequestUserMenusByRoleId } from /service/login/login;
const routes: ArrayRouteRecordRaw [{path: /,redirect: /main},{path: /login,name: login, component: () import(/* webpackChunkName: about */ ../views/login/login.vue)},{path: /main,name: main, redirect:/main/system/user,component: () import(/* webpackChunkName: about */ ../views/main/main.vue),children:[]},{//404请求不存在的路径path: /:pathMatch(.*)*,component: () import(/views/not-found/not-found.vue)}
]const router createRouter({history: createWebHashHistory(),routes
})
// 导航守卫
router.beforeEach((to) {if (to.path ! /login) {const token window.localStorage.getItem(token)if (!token) {return /login} }
})
console.log(router, router)
export default router
