Appearance
后端路由
后端路由
1.路由参数
- 路由meta对象参数说明
ts
meta: {
title: 菜单栏及 tagsView 栏、菜单搜索名称
isLink: 是否超链接菜单,开启外链条件,`1、isLink: 链接地址不为空 2、isIframe:false`
isHide: 是否隐藏此路由
isKeepAlive: 是否缓存组件状态
isAffix: 是否固定在 tagsView 栏上
isIframe: 是否内嵌窗口,开启条件,`1、isIframe:true 2、isLink:链接地址不为空`
permission: 权限标识
icon: 菜单、tagsView 图标
}
2. 静态路由
- 静态路由包括登录,404、401、个人中心
ts
/**
* 定义404、401界面
*/
export const notFoundAndNoPower = [
{
path: '/:path(.*)*',
name: 'notFound',
component: () => import('/@/views/error/404.vue'),
meta: {
title: 'message.staticRoutes.notFound',
isHide: true,
},
},
{
path: '/401',
name: 'noPower',
component: () => import('/@/views/error/401.vue'),
meta: {
title: 'message.staticRoutes.noPower',
isHide: true,
},
},
{
path: '/personal',
name: 'personal',
component: () => import('/@/views/personal/index.vue'),
meta: {
title: 'message.router.personal',
isHide: true,
},
},
];
/**
* 定义静态路由(默认路由)
* @returns 返回路由菜单数据
*/
export const staticRoutes: Array<RouteRecordRaw> = [
{
path: '/login',
name: 'login',
component: () => import('/@/views/login/index.vue'),
meta: {
title: '登录',
},
},
];
3. 动态路由
- 第一个顶级 children 的路由将被替换成接口请求回来的路由数据
ts
/**
* 定义动态路由
*/
export const dynamicRoutes: Array<RouteRecordRaw> = [
{
path: '/',
name: '/',
component: () => import('/@/layout/index.vue'),
redirect: '/home',
meta: {
isKeepAlive: true,
},
children: [
{
path: '/home',
name: 'home',
component: () => import('/@/views/home/index.vue'),
meta: {
title: 'message.router.home',
isLink: '',
isHide: false,
isKeepAlive: true,
isAffix: true,
isIframe: false,
permission:[],
icon: 'iconfont icon-shouye',
},
},
],
},
];
4. 初始化动态路由
- 用户登录成功之后,添加完动态路由,再进行 router 跳转
ts
//初始化动态路由
await initBackEndControlRoutes();