vue

2023-11-07 04:57| 来源: 网络整理| 查看: 265

所使用的Vue3+Ts+vite 手动搭建的项目，对于vue-cli搭建的项目同样适用。项目流程不多赘述，直接上用法

一、动态添加路由 { key: 唯一值id, title: 名称, icon: 图标, children: [{ parentKey: 父id, key: 唯一值id, title:名称, name:路由名称 path: 文件路径, type: 类型, MENU菜单 BUTTON 具体按钮 hiddle:作为菜单是否隐藏 true false }] }

1、取出非第一级的所有数据

/** * * @param data 动态菜单 * @returns */ const getRouterTreeAdd = (data: any = []) => { let router: any = [] const childrens = data.map((item: any) => item.children) || [] childrens.map((item: any) => { router = [...router, ...item] }) return router.filter((item: any) => item.path) }

2、映射出所有路由规则

/** * * @param menuTree 登录后获取的菜单 * @returns */ const getRouterRules = (menuTree: any) => { const routerTree = getRouterTreeAdd(Object.assign([], menuTree)) // 获取菜单权限与映射数据匹配对应信息生成动态路由 const getMatching = (data: any = []) => { data.map((item: any) => { item.name = item.name item.path = `/${item.name}` //与名称同名方便后期管理 item.meta = {title: item.title} item.component = () => import(element.path) const children: any = item.children || [] if (children.length) { getMatching(children) } }) } // 调用事件生成规则 getMatching(routerTree) return routerTree }

3、添加路由

// 记得引入router import Router from '../router/index' // 添加路由规则 add_route(state: any) { const rules = getRouterRules(Object.assign([],state.menuTree) ) let {routes}: any = Router.options if (rules.length === 0) return; routes[2].children = rules Router.addRoute(routes[2]) }, 注：vue3中使用addRoute、vue2.x应该使用addRoutes，具体查看官方网站

4、登录成功后保存菜单数据，保存后在vuex直接触发添加事件即可 this.commit('add_route')

使用时别忘了在vuex->mutations、vuex->actions 添加相应的触发事件

二、动态路由刷新后消失解决办法

网上解决办法有不少，但是看起来很复杂。在此有一个新思路解决。

思路：路由消失了是不是再次添加就可以了？问题：刷新后消失什么时候添加？在哪里添加？

//定义变量判断是否已经动态添加过，如果刷新后load永远为 0 let load = 0 //导航守卫 router.beforeEach((to, from, next) => { // 获取菜单 const menuTree = store.getters.getMenuTree //非登录、有菜单数据、没有进行添加（或者刷新了） if (load === 0 && menuTree.length && to.name!=='Login') { load++ //再次调用存储菜单数据(前提是在存储的地方有调用添加路由规则)、或者直接调用动态添加路由规则事件 store.dispatch("SAVE_MENUTREE", menuTree); //添加后跳转到应访问的地址 next({path: to.fullPath}) } })

【本文地址】

公司简介

联系我们