44 动态路由基础配置 - udo-bit/naive_admin_pro GitHub Wiki

目标

动态路由的添加和配置

开发

上节课我们已经完成了静态路由和动态路由的划分，现在看到我们上节课划分完路由后页面已经加载不出来了，是因为我们没有将动态路由再添加到路由列表中，这节课我们就一起来配置一下这一部分。
首先我们切到我们的项目中，我们需要先找一个地方来存放我们的路由，那么我们第一个能想到的就是通过状态管理器来存储我们的路由信息。
既然能作为动态路由出现，那么一定是与用户的信息有一定的关系的，所以我们直接把我们路由相关的信息全部放到我们的stores/user.ts的状态管理器中进行存储。如下：

const routerRecords = ref<RouteRecordRaw[]>([])

然后我们还需要一个方法对路由进行处理加工，那么我们同时在user.ts中定义一个方法如下：

const generateRoutes = async () => {
    
}

接下来我们来分析一下怎么动态的去添加路由，我们需要使用vue-router中的addRoute的方法实现添加路由，
但是我们会发现，如果通过这个方法去添加路由，他只能接受一个对象而不是一个数组。
所以我们需要定义一个通用的根节点路由，我们在routes/dynamic-routes.ts中添加一个根节点路由，如下：

export const rootRouter: RouteRecordRaw = {
  path: '/',
  name: 'default-router',
  redirect: '/home',
  component: Layout,
  children: [],
}

我们将所有的动态路由全部挂载到我们的这个跟路由上子节点中，这样我们就能直接使用我们的addRoute这个方法了。
首先我们先来简单实现一下generateRoutes这个方法，如下：

 const generateRoutes = async () => {
    const routerRecord = {
      ...rootRouter,
      children: dynamicRoutes,
    }
    routerRecords.value = dynamicRoutes
    return routerRecord
  }

完成后我们需要再路由拦截中添加路由信息，我们在拿到用户信息的后，再去动态添加路由信息，
routes/router-guard.ts中：

await userStore.getUserInfo()
// 判断当前页面是不是登录页面，如果是登录页面，就跳转到首页
// 调用获取路由信息
const routerRecord = await userStore.generateRoutes()
router.addRoute(routerRecord)

我们配置到这里以后我们刷新一下页面，发现我们的页面依然没有任何东西，而且还给我们报错，说拿不到路由信息。那么导致这种原因的问题是，我们跳转路由在先，动态添加路由在后，所以我们跳转的过程中，路由并没有完全更新，所以，为了避免这种情况我们再让他重新跳转一次当前页面进行加载：

router.addRoute(routerRecord)
if (to.path === loginRoute) {
  next({
    path: '/',
  })
  return
}
else if (routerRecord) {
  // 增加
  next({
    ...to,
    replace: true,
  })
  return
}

然后我们会发现页面能跳转了，但是会出现两个菜单的情况，这是因为我们的rootRoute中使用了Layout布局的同时，我们在动态路由中也使用了Layout布局，这种情况下，我们可以直接删除动态路由中的Layout的布局实现我们想要的功能。

const dynamicRoutes: RouteRecordRaw[] = [
  {
    path: '/',
    name: 'index',
-    // component: Layout,
    redirect: '/home',
    children: [
      {
        path: '/home',
        name: 'Home',
        component: () => import('~/pages/index.vue'),
        meta: {
          title: 'Home',
        },
      },
      {
        path: '/workspace',
        name: 'Workspace',
        component: () => import('~/pages/workspace/index.vue'),
      },
    ],
  },
]

最后测试。

⚠️ **GitHub.com Fallback** ⚠️