jeecgboot-vue3 路由学习分享

前小白α

已于 2023-03-22 17:56:29 修改

阅读量2.6k

点赞数

文章标签：学习 vue.js typescript Powered by 金山文档

于 2023-03-22 17:49:14 首次发布

本文链接：https://blog.csdn.net/m0_55954924/article/details/129715270

版权

本文档介绍了在JeecgBoot项目中使用Vue3进行路由配置的学习过程，包括路由的初始化、模块说明、跳转逻辑、首页路由的更改方法以及如何新增路由模块。详细阐述了路由的安装、引入、配置，以及路由模块的组织结构和页面跳转的具体实现。

摘要由CSDN通过智能技术生成

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

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;
}