admin管理员组

文章数量:1633929

以下是在实习时，交给我的一项任务，让我理清路由的相关问题，以下是一些学习记录

1.路由初始化

（框架中路由模块已经都定义好了，以下只是我在学习过程中理解的思路）

（1）路由的安装

npm install vue-router@4

（2）路由的引入

Vue 3 的引入方式如下（其中 RouteRecordRaw 是路由项目的 TS 类型）。

（在src/router目录下的index.ts中的一些配置）

import { createRouter, createWebHistory } from 'vue-router'
​
import type { RouteRecordRaw } from 'vue-router'
​
//定义路由数组
const routes: Array<RouteRecordRaw> = [
  // ...
]
​
const router = createRouter({
  // import.meta.env. 这个变量，
  //它是由 Vite 提供的环境变量
  history: createWebHistory(import.meta.env.BASE_URL),
  routes,
})
​
export default router
（3）一些配置说明
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权限模式下，生成对应的菜单而忽略路由。2.5.3以上版本有效
  ignoreRoute?: boolean;
  // 是否在子级菜单的完整path中忽略本级path。2.5.3以上版本有效
  hidePathForChildren?: boolean;
}

本文标签： 路由jeecgboot

版权声明：本文标题：jeecgboot-vue3 路由学习分享 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://www.elefans.com/dongtai/1729176147a1188741.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。