路由文件

向军大叔每晚八点在 抖音 和 bilibli 直播

路由需要在 src/router/modules 目录中定义，然后在 src/router/modules/index.ts 中注册。

如果定义后无效，请重起项目

类型声明

路由的TS类型声明文件位于 types/router.d.ts，一般情况下你不需要修改该文件。

下面对路由的meta元信息进行说明

interface RouteMeta {
  menu?: RouteMenu
  title?: string				菜单名称，用于后台动态渲染菜单使用
  auth?: boolean				登录用户才可访问
  guest?: boolean				游客才可访问
  enterClass?: string		进入时动画
  leaveClass?: string		离开时动画
  permission?: string		验证的权限标识
}

在路由Meta（元信息）中可以定义后台菜单，下面是对meta中的menu选项的说明

• 图标库使用 iconpark

type RouteMenu = {
  title?: string												菜单名称
  icon?: DefineComponent<IIconProps>		图标
  blank?: boolean												新窗口打开链接
  order?: number												后台菜单排序
}

路由定义

路由建议定义在 src/router/modules 目录下，下面是路由定义的示例

import { DashboardOne } from '@icon-park/vue-next'
import { RouteRecordRaw } from 'vue-router'
export default {
  path: '/admin',
  component: () => import('@/layouts/admin.vue'),
  meta: { order: 1, auth: true, menu: { title: 'Dashboard', icon: DashboardOne } },
  children: [
    {
      name: 'admin.table',
      path: 'table',
      component: () => import('@/views/admin/table.vue'),
      meta: { menu: { title: '表格展示' } },
    }
  ],
} as RouteRecordRaw

定义好的路由文件需要在 src/router/modules/index.ts 中声明

import admin from './admin'
import auth from './auth'
import editor from './editor'
import errors from './errors'
import home from './home'
import upload from './upload'

export default [admin, auth, editor, errors, home, upload]

动画切换

在路由中定义 enterClass 进入动画，与 leaveClass 离开动画，动画使用的类为 Animate.css 动画库。

import { DashboardOne } from '@icon-park/vue-next'
import { RouteRecordRaw } from 'vue-router'
export default {
  path: '/admin',
  component: () => import('@/layouts/admin.vue'),
  meta: { order: 1, auth: true, menu: { title: 'Dashboard', icon: DashboardOne } },
  children: [
    {
      name: 'admin',
      path: '',
      component: () => import('@/views/admin/index.vue'),
        meta: { menu: { title: '工作台' }, enterClass: 'animate__fadeInRight', leaveClass: 'animate__fadeOutLeft' },
    }
  ],
} as RouteRecordRaw