Appearance
路由文件
路由需要在 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