vue3動態(tài)路由addRoute實例詳解

更新時間：2023年09月07日 11:07:55 作者：fml海棠

這篇文章主要介紹了vue3動態(tài)路由addRoute的相關知識，本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下

Vue2中，有兩種方法實現(xiàn)路由權限動態(tài)渲染：

  router.addRoute(parentOrRoute, route)    //添加單個
  router.addRoutes(routes)                  //添加多個

但在Vue3中，只保留了 addRoute() 方法。

首先，假設路由如下：

const menu = [{
  id: 'system-manage',
  name: 'system-manage',
  path: '/system',
  meta:{
    title: '系統(tǒng)管理',
    icon: 'setting',
  },
  compoent: 'layout',
  children: [
    {
      id: 'role',
      name: 'role',
      path: '/system/role',
      meta:{
        title: '角色管理',
        icon: 'user-filled',
      },
      compoent: 'view/system/role',
      children: []
    }
  ]
}]

// 遞歸替換引入component
function dynamicRouter(routers) {
  const list = []
  routers.forEach((itemRouter,index) => {
    list.push({
      ...itemRouter,
      component: ()=>import(`@/${itemRouter.component}`)
    })
    // 是否存在子集
    if (itemRouter.children && itemRouter.children.length) {
      list[index].children = dynamicRouter(itemRouter.children);
    }
  })
  return list
}
// 防止首次或者刷新界面路由失效
let registerRouteFresh = true
router.beforeEach((to, from, next) => {
  if (registerRouteFresh) {
    // addRoute允許帶children添加，所以循環(huán)第一層即可
    dynamicRouter(menu).forEach((itemRouter) => {
      router.addRoute(itemRouter)
    })
    next({ ...to, replace: true })
    registerRouteFresh = false
  } else {
    next()
  }
})

使用這種拼接的方式會導致全局scss多次注入錯誤，而且需要后臺返回文件路徑。

scss報錯

所以改用以下方式：

// 在本地建一個路由表
const path = [{
  path: '/system/role',
  name: '角色管理',
  component: () => import('@/views/system/role')
}]
function dynamicRouter(routers) {
  const list = []
  routers.forEach((itemRouter,index) => {
    // 從本地找組件
    const authRoute = path.find(i=>i.path==itemRouter.path)
    list.push({
      ...itemRouter,
      component: authRoute?.component || Layout //沒找到則用默認框架組件
    })
    // 是否存在子集
    if (itemRouter.children && itemRouter.children.length) {
      list[index].children = dynamicRouter(itemRouter.children);
    }
  })
  return list
}

如果出現(xiàn) Error: Invalid route component ,看下路徑是否正確，還有 addRoute 里傳的是否是對象，一開始傳了數組導致找了半天（扶額

Invalid route