VUE动态对接后端菜单，解决刷新404及白屏问题

最新推荐文章于 2023-10-18 18:20:39 发布

a718089112

最新推荐文章于 2023-10-18 18:20:39 发布

阅读量638

点赞数 1

分类专栏： VUE router 文章标签： vue

本文链接：https://blog.csdn.net/a718089112/article/details/115351275

版权

VUE 同时被 2 个专栏收录

1 篇文章 0 订阅

订阅专栏

router

1 篇文章 0 订阅

订阅专栏

使用得关键技术：

new Router得matcher，替换路由，解决登录角色切换时，路由重复问题
router.onReady方法，在页面刷新时，静态路由加载完成执行，重新调用addRouters动态添加路由（通配符404路由要动态在最后添加）

1、从后端获取菜单，我的json格式如下：

[{
"id": "c377b2ec3add4a2cb757e20f97996a5a",
"createDate": "2021-03-31 11:40:00",
"updateDate": "2021-03-31 11:56:12",
"createBy": null,
"updateBy": "",
"delFlag": 1,
"systemFlag": "service-mdinfo",
"parentId": "",
"menuName": "咨询互动",
"menuOrder": 1,
"showFlag": 1,
"sort": 20,
"icon": "fa fa-user-o",
"path": "/",
"component": "Home.vue",
"sonList": [
{
"id": "0c6082ff312f40e9b396d03e54c7aef3",
"createDate": "2021-03-31 11:43:47",
"updateDate": null,
"createBy": null,
"updateBy": null,
"delFlag": 1,
"systemFlag": "service-mdinfo",
"parentId": "c377b2ec3add4a2cb757e20f97996a5a",
"menuName": "咨询管理",
"menuOrder": 2,
"showFlag": 1,
"sort": null,
"icon": null,
"path": "/zixun",
"component": "zixun/zixun.vue",
"sonList": null
}
]
}]

2、把后端菜单转换为routers对象

export function formatMenuToRouter (menuList) {
  var userRoutes = []
  for (var i = 0; i < menuList.length; i++) {
    var menu = menuList[i]
    var userRoute = dealMenuToRouter(menu)
    userRoutes.push(userRoute)
  }
  // 统一404页面错误 放到最后，防止刷新直接404
  userRoutes.push(route404)
  return userRoutes
}

function dealMenuToRouter (menu) {
  var userRoute = {
    path: menu.path,
    component: () => import('@/views/' + menu.component),
    name: menu.menuName,
    iconCls: menu.icon
  }
  if (menu.sonList != null && menu.sonList.length > 0) {
    var children = []
    for (var i = 0; i < menu.sonList.length; i++) {
      var sonMenu = menu.sonList[i]
      var sonRoute = dealMenuToRouter(sonMenu)
      children.push(sonRoute)
    }
    userRoute.children = children
  }
  return userRoute
}

3、登录跳转前执行

// 转换路由 menuList格式见步骤1
var userRoutes = formatMenuToRouter(menuList)
// 重置路由
resetRouter()
// 添加路由
this.$router.addRoutes(userRoutes)
// 菜单数据放到缓存
sessionStorage.setItem('menuList', JSON.stringify(data.result))

路由相关方法

// 创建路由方法
const createRouter = () => new Router({
  mode: 'history',
  base: process.env.BASE_URL,
  routes: baseRoutes
})

const router = createRouter()

// 重置路由
export function resetRouter () {
  var newRouter = createRouter()
  router.matcher = newRouter.matcher
}

4、页面刷新时，onReady方法

router.onReady(() => {
  // 页面刷新加载动态路由
  var menuList = sessionStorage.getItem('menuList')
  if (menuList) {
    var menuObj = JSON.parse(menuList)
    var userRoutes = formatMenuToRouter(menuObj)
    router.addRoutes(userRoutes)
  }
})