43 划分静态路由和动态路由 - udo-bit/naive_admin_pro GitHub Wiki

目标

划分动态路由和静态路由

疑问

有一部分同学可能会有疑问，为什么我们上节课还在做侧边菜单的开发，这节课就跳到了动态路由部分。
首先我们做了动态路由才能实现我们的侧边菜单，所以我们需要让同学们对侧边菜单有个大概的印象后，回过头来我们在开发动态路由的时候能让大家知道我们现在做的这些工作是为谁做的准备。

为什么要使用动态路由

既然我们现在要开发的是通用后台管理系统，那么我们比不可少的就是权限部分，我们需要根据用户权限的不同，动态的去加载不动的路由和菜单信息，而不能将所有的路由一股脑的全部加载进来，所以我们衍生出来了动态路由。

划分动态路由和静态路由

接下来我们一起划分一下动态路由和静态路由部分。

哪一类属于静态路由

静态路由表示我们在应用程序启动的时候，就已经内置好的一些路由地址并且不会再次发生改变的路由，像登录页、注册页以及错误页等。
那么我们就可以很好的区分静态路由了，接下来我们再重新梳理一下我们的static-routes.ts的文件。

import type { RouteRecordRaw } from 'vue-router'

const staticRoutes: RouteRecordRaw[] = [
  {
    path: '/login',
    name: 'login',
    component: () => import('~/pages/login/index.vue'),
  },
  {
    path: '/error',
    name: 'error',
    component: () => import('~/pages/exception/error.vue'),
  },
]

export default staticRoutes

在index.ts中：

import { createRouter, createWebHistory } from 'vue-router'
import staticRoutes from '~/routes/static-routes'
import { Layout } from '~/layouts'
const router = createRouter({
  routes: [
    {
      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'),
        },
      ],
    },
    ...staticRoutes,
  ],
  history: createWebHistory(import.meta.env.VITE_APP_BASE ?? '/'),
})

export default router

动态路由

那么除了静态路由其余的我们都可以称为静态路由。
我们创建一个dynamic-routes.ts的文件。

import type { RouteRecordRaw } from 'vue-router'
import { Layout } from '~/layouts'

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'),
      },
    ],
  },
]

export default dynamicRoutes
⚠️ **GitHub.com Fallback** ⚠️