详解 Vue3 动态路由 - 分析🍈

352 阅读2分钟

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

动态路由 - 分析🍈

引言

通过之前一段时间 ExpressMysql 的学习

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

在之前的一些列文章下,终于将我们的 菜单 页面以及功能 已经处理完毕

接下来就是根据我们所添加配置的 菜单 生成 路由,也称 动态路由

分析

要实现一个 动态路由,切勿直接将原先的 静态路由 废弃。

理清思路,实现 动态路由 的几个前提是什么。

  • 一个 简单的 静态路由

  • 实现 侧边栏菜单

  • 最后是得到 动态路由

静态路由-->侧边栏菜单

之前我们的配置,就是直接在路由文件的代码上,进行写死的状态,也称 静态路由

它与我们通过 菜单管理 所配置的 菜单,根本是 毫无关系

所以我们如果想要实现一个 动态路由,那么需要先将我们之前配置的 菜单侧边栏菜单 对应起来。

  • 先实现一个通过 菜单,也就是后端返回的所有的菜单列表,前端来进行一定的加工,得到一个树型的数据结构,在侧边栏中进行展示

  • 点击后,路由地址会进行改变

  • 但是由于没有相关路由,所以会得到一个空白页面。

侧边栏菜单-->动态路由

上面我们的到相关的 侧边栏菜单 后,就可以安心处理 动态路由

动态路由 其实最重要有两个知识点

  • 如何动态 import 组件

  • router.addRoute()

看着很简单,其实做起来会遇到很多意想不到的问题。

最后,这里先将 简单的 静态路由 的代码贴出来,满足我们的 登录工作台 即可

export const constantRoutes: Array<RouteRecordRaw> = [
  {
    path: '/',
    redirect: '/workbench',
    meta: {
      hidden: true
    }
  },
  {
    path: '/workbench',
    name: 'Layout',
    component: Layout,
    meta: {
      title: '首页',
      icon: 'icon-G-stack-line',
      alone: true
    },
    children: [
      {
        path: '/workbench',
        name: 'workbench',
        component: () => import(/* webpackChunkName: "workbench" */ '@/views/workbench/index.vue'),
        meta: {
          title: '工作台'
          // icon: 'icon-G-stack-line'
        },
        children: []
      }
    ]
  },
  {
    path: '/login',
    name: 'login',
    component: () => import(/* webpackChunkName: "login" */ '@/views/login/index.vue'),
    meta: {
      title: '登录',
      hidden: true
    }
  }
]

总结

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

这里我们 分析了 动态路由 该如何做,后续该如何实现。