携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第16天，点击查看活动详情

动态路由 - 实现🍈

引言

通过之前一段时间 Express 和 Mysql 的学习

这里尝试来搭建一个 后台系统 来巩固下学习的技术。

动态路由

前面我们将 菜单管理 配置的菜单与我们的 侧边栏菜单 进行了结合

页面效果已经成功展示

但是点击菜单时，路由地址虽然发生变化，但是页面是空白。其实就是我们的路由还没添加上去。

下面实现下 动态路由

动态 compontent

上一节，我们将 侧边栏菜单 的数据结构已经写好，只是没有进行 compontent 组件的一个引用

所以我们要实现 动态路由，自然是离不开 compontent 的

如何根据不同的路由，生成不同的 compontent，这个其实是我们所关心的。

在 vue3 中，可以通过 import.meta.glob 的方式，来匹配，之后得到目录下的文件

const modules = import.meta.glob('../views/**/**.vue')

console.log(modules,'modules')

上面图中可以看到全是引入的组件，得到一个集合

下面的代码则是如何使我们的 菜单路径 和我们的 文件路径，进行联系起来。

并且通过访问集合名，来得到相应的组件。

const getTree = (list, pid = 0, pidPath = '') => {
  return list
    .filter((item) => item.pid === pid)
    .map((item) => {
      const url = item.url.startsWith('/') ? item.url : '/' + item.url

      const component = pid === 0 ? Layout : modules[`../views${pidPath + url}/index.vue`]

      const pidRouterPath = pid === 0 ? url : pidPath + url

      return {
        path: pidRouterPath,
        name: pidRouterPath?.slice(1),
        pidRouterPath,
        component,
        meta: {
          title: item.name, // 菜单名
          icon: item.icon, // 菜单的icon
          hidden: item.type === 2 ? true : false, // 是否隐藏
          isDynamic: true // 是动态路由
        },
        children: item.type === 1 ? [] : getTree(list, item.id, pidRouterPath)
      }
    })
}

但是还没有完成，我们需要通过 router.addRoute 的方式进行 动态路由 的添加

const routeList = getTree(menus)
const newMenuList = [...constantRoutes, ...routeList]
newMenuList.forEach((item) => {
  router.addRoute(item)
})

之后就可以访问了

总结

通过 Express-Mysql-Vue3-TS-Pinia 做出一个 后台系统 项目

这里我们将 vue3 中的 动态路由 实现完毕。

详解 Vue3 动态路由 - 实现🍈

动态路由 - 实现🍈

引言

动态路由

动态 compontent

总结