了解一下前端路由 常用信息配置：
路由配置说明
注意事项
- 整个项目所有路由 name 不能重复
- 除了 layout 对应的 path 前面需要加 /，其余子路由都不要以/开头
示例
import type { AppRouteModule } from '/@/router/types';
import { getParentLayout, LAYOUT } from '/@/router/constant';
import { t } from '/@/hooks/web/useI18n';
const permission: AppRouteModule = {
path: '/level',
name: 'Level',
component: LAYOUT,
redirect: '/level/menu1/menu1-1/menu1-1-1',
meta: {
icon: 'ion:menu-outline',
title: t('routes.demo.level.level'),
},
children: [
{
path: 'tabs/:id',
name: 'TabsParams',
component: getParentLayout('TabsParams'),
meta: {
carryParam: true,
hidePathForChildren: true, // 本级path将会在子级菜单中合成完整path时会忽略这一层级
},
children: [
path: 'tabs/id1', // 其上级有标记hidePathForChildren，所以本级在生成菜单时最终的path为 /level/tabs/id1
name: 'TabsParams',
component: getParentLayout('TabsParams'),
meta: {
carryParam: true,
ignoreRoute: true, // 本路由仅用于菜单生成，不会在实际的路由表中出现
},
]
},
{
path: 'menu1',
name: 'Menu1Demo',
component: getParentLayout('Menu1Demo'),
meta: {
title: 'Menu1',
},
redirect: '/level/menu1/menu1-1/menu1-1-1',
children: [
{
path: 'menu1-1',
name: 'Menu11Demo',
component: getParentLayout('Menu11Demo'),
meta: {
title: 'Menu1-1',
},
redirect: '/level/menu1/menu1-1/menu1-1-1',
children: [
{
path: 'menu1-1-1',
name: 'Menu111Demo',
component: () => import('/@/views/demo/level/Menu111.vue'),
meta: {
title: 'Menu111',
},
},
],
},
],
},
],
};
export default permission;
mate：
export interface RouteMeta {
// 路由title 一般必填
title: string;
// 动态路由可打开Tab页数
dynamicLevel?: number;
// 动态路由的实际Path, 即去除路由的动态部分;
realPath?: string;
// 是否忽略权限，只在权限模式为Role的时候有效
ignoreAuth?: boolean;
// 可以访问的角色，只在权限模式为Role的时候有效
roles?: RoleEnum[];
// 是否忽略KeepAlive缓存
ignoreKeepAlive?: boolean;
// 是否固定标签
affix?: boolean;
// 图标，也是菜单图标
icon?: string;
// 内嵌iframe的地址
frameSrc?: string;
// 指定该路由切换的动画名
transitionName?: string;
// 隐藏该路由在面包屑上面的显示
hideBreadcrumb?: boolean;
// 如果该路由会携带参数，且需要在tab页上面显示。则需要设置为true
carryParam?: boolean;
// 隐藏所有子菜单
hideChildrenInMenu?: boolean;
// 当前激活的菜单。用于配置详情页时左侧激活的菜单路径
currentActiveMenu?: string;
// 当前路由不再标签页显示
hideTab?: boolean;
// 当前路由不再菜单显示
hideMenu?: boolean;
// 菜单排序，只对第一级有效
orderNo?: number;
// 忽略路由。用于在ROUTE_MAPPING以及BACK权限模式下，生成对应的菜单而忽略路由。
ignoreRoute?: boolean;
// 是否在子级菜单的完整path中忽略本级path
hidePathForChildren?: boolean;
}
外部页面嵌套
只需要将 frameSrc 设置为需要跳转的地址即可
const IFrame = () => import('/@/views/sys/iframe/FrameBlank.vue');
{
path: 'doc',
name: 'Doc',
component: IFrame,
meta: {
frameSrc: 'https://vvbin.cn/doc-next/',
title: t('routes.demo.iframe.doc'),
},
},
外链
只需要将 path 设置为需要跳转的HTTP 地址即可
{
path: 'https://vvbin.cn/doc-next/',
name: 'DocExternal',
component: IFrame,
meta: {
title: t('routes.demo.iframe.docExternal'),
},
}
动态路由Tab自动关闭功能
若需要开启该功能，需要在动态路由的meta中设置如下两个参数：
- dynamicLevel 最大能打开的Tab标签页数
- realPath 动态路由实际路径(考虑到动态路由有时候可能存在N层的情况, 例：/:id/:subId/:...), 为了减少计算开销, 使用配置方式事先规定好路由的实际路径(注意: 该参数若不设置，将无法使用该功能)
{
path: 'detail/:id',
name: 'TabDetail',
component: () => import('/@/views/demo/feat/tabs/TabDetail.vue'),
meta: {
currentActiveMenu: '/feat/tabs',
title: t('routes.demo.feat.tabDetail'),
hideMenu: true,
dynamicLevel: 3,
realPath: '/feat/tabs/detail',
},
}
#图标
这里的 icon 配置，会同步到 菜单（icon 可以查看此处）。
路由刷新
项目中采用的是重定向方式
#实现
import { useRedo } from '/@/hooks/web/usePage';
import { defineComponent } from 'vue';
export default defineComponent({
setup() {
const redo = useRedo();
// 执行刷新
redo();
return {};
},
});
#Redirect
src/views/sys/redirect/index.vue
import { defineComponent, unref } from 'vue';
import { useRouter } from 'vue-router';
export default defineComponent({
name: 'Redirect',
setup() {
const { currentRoute, replace } = useRouter();
const { params, query } = unref(currentRoute);
const { path } = params;
const _path = Array.isArray(path) ? path.join('/') : path;
replace({
path: '/' + _path,
query,
});
return {};
},
});
#页面跳转
页面跳转建议采用项目提供的 useGo
#方式
import { useGo } from '/@/hooks/web/usePage';
import { defineComponent } from 'vue';
export default defineComponent({
setup() {
const go = useGo();
// 执行刷新
go();
go(PageEnum.Home);
return {};
},
});
#多标签页
标签页使用的是 keep-alive 和 router-view 实现，实现切换 tab 后还能保存切换之前的状态。
#如何开启页面缓存
开启缓存有 3 个条件
- 在 src/settings/projectSetting.ts 内将openKeepAlive 设置为 true
- 路由设置 name，且不能重复
- 路由对应的组件加上 name，与路由设置的 name 保持一致
{
...,
// name
name: 'Login',
// 对应组件组件的name
component: () => import('/@/views/sys/login/index.vue'),
...
},
// /@/views/sys/login/index.vue
export default defineComponent({
// 需要和路由的name一致
name:"Login"
});
注意
keep-alive 生效的前提是：需要将路由的 name 属性及对应的页面的 name 设置成一样。因为：
include - 字符串或正则表达式，只有名称匹配的组件会被缓存
#如何让某个页面不缓存
可在 router.meta 下配置
可以将 ignoreKeepAlive 配置成 true 即可关闭缓存。
export interface RouteMeta {
// 是否忽略KeepAlive缓存
ignoreKeepAlive?: boolean;
}