路由和菜单

路由和菜单是绑定在一起的，只有在 @/router/index.ts 下面配置对应的路由，菜单才能动态生成。当然这样就需要在配置路由的时候遵循一些约定的规则。

配置项

// 当设置 noRedirect 的时候该路由在面包屑导航中不可被点击
redirect: 'noRedirect';
meta: {
  // 当设置 true 的时候该路由不会在侧边栏出现 如401，login等页面，或者如一些编辑页面/edit/1
  hidden: true, // (默认 false)
  // 当你一个路由下面的 children 声明的路由大于1个时，自动会变成嵌套的模式--如组件页面
  // 只有一个时，会将那个子路由当做根路由显示在侧边栏--如引导页面
  // 若你想不管路由下面的 children 声明的个数都显示你的根路由
  // 你可以设置 alwaysShow: true，这样它就会忽略之前定义的规则，一直显示根路由
  alwaysShow: true,
  roles: ['admin', 'editor'], // 设置该路由进入的权限，支持多个权限叠加，不需要权限判断的留空即可
  title: '', // 设置该路由在侧边栏和面包屑中展示的名字
  icon: '', // 设置该路由的图标，支持 vusui-icon / svg 图标。
  elIcon: '', // 仅支持 element-plus icon , 如设置 elIcon 图标会优先显示, icon设置则无效
  noCache: true, // 如果设置为true，则不会被 <keep-alive> 缓存(默认 false)
  breadcrumb: false, // 如果设置为false，则不会在breadcrumb面包屑中显示(默认 true)
  affix: true, // 如果设置为true，它则会固定在tags中(默认 false)
  noTags: true, // 如果设置为true，它则不会显示在tags中(默认 false)
  open: true, // 如果设置为true，它则展开当前子菜单的数组(默认 false)
  // 当路由设置了该属性，则会高亮相对应的侧边栏。
  // 这在某些场景非常有用，比如：一个文章的列表页路由为：/article/list
  // 点击文章进入文章详情页，这时候路由为/article/1，但你想在侧边栏高亮文章列表的路由，就可以进行如下设置
  activeMenu: '/article/list'
}

路由

路由分为两种 constantRoutes 和 asyncRoutes。
constantRoutes：代表那些不需要动态判断权限的路由，如登录页、404、等通用页面。
asyncRoutes：代表那些需求动态判断权限并通过 addRoute 动态添加的页面。

⚠️ 注意事项

vue-router4的方法是 addRoute ，而不是 addRoutes。

<script setup lang="ts">
const router = [/* 动态路由数据 */];
router.forEach((item) => {
  router.addRoute(item);
});
</script>

静态路由的配置和 vue-router4open in new window 官方并没有区别，自行查看文档。
动态路由的配置具体的会在菜单里介绍。

菜单

动态路由数据格式跟静态路由的数据格式是不一样的，需要对动态路由的数据作处理，也可以自行修改。

对应目录

@/app/components/sidebaropen in new window

// 动态菜单数据格式
export default [
  // 父级菜单写法
  {
    // 菜单 id
    id: 1000,
    // 菜单父级 id
    parentId: 0,
    // 排序，数值越大越往前排
    sort: 0,
    // 路由名称(不要起同名的)
    name: 'System',
    // 路由地址
    path: '/system',
    // 如果使用默认的布局组件，输入 # 号即可。
    component: '#', // # 号为默认布局组件
    // 重定向
    redirect: '/system/config',
    // 以下参数为 meta: {} 对象属性
    // 是否隐藏菜单
    hidden: true,
    // 一直显示根路由
    alwaysShow: true,
    // 标题
    title: '系统管理',
    // 图标
    icon: 'vi-set-o',
    // element-plus 图标
    elIcon: '',
    // 不缓存
    noCache: false,
    // 是否在面包屑中显示
    breadcrumb: true,
    // 固定在tags标签栏中(不可删除)
    affix: false,
    // 不在tags标签栏中显示
    noTags: false,
    // 展开当前子菜单(如果有子菜单)
    open: true,
    // 高亮菜单
    activeMenu: '',
    // 菜单权限
    roles: ['admin']
  },
  // 子级菜单写法
  {
    id: 1001,
    parentId: 1000,
    sort: 0,
    name: 'SystemConfig',
    path: 'config',
    // 使用其它组件格式需要在 views 目录下创建对应的组件目录和文件(只支持vue格式，需要扩展的请自行修改)
    // 定义自它组件格式：system/config，开头不需要加 /，结束也不需要加 .vue
    // 最后生成完整的路径为：/views/system/config.vue
    component: 'system/config',
    // 以下参数为 meta: {} 对象属性
    // 是否隐藏菜单
    hidden: false,
    // 一直显示根路由
    alwaysShow: false,
    // 标题
    title: '系统设置',
    // 图标
    icon: '',
    // element-plus 图标(请按element-plus图标名称格式书写)
    elIcon: 'Monitor',
    // 不缓存
    noCache: false,
    // 是否在面包屑中显示
    breadcrumb: true,
    // 固定在tags标签栏中(不可删除)
    affix: false,
    // 不在tags标签栏中显示
    noTags: false,
    // 展开当前子菜单(如果有子菜单)
    open: true,
    // 高亮菜单
    activeMenu: '',
    // 菜单权限
    roles: ['admin']
  }
];

生成路由格式

使用 formatRouter 方法将菜单数据生成最终的路由格式。

菜单外链

可以在菜单中配置一个外链，只要在 path 中填写合法的 url 路径，点击时就会在新窗口打开这个页面。

例如：

{
  id: 1000,
  parentId: 0,
  sort: 0,
  path: 'https://www.vusui.com',
  component: '#',
  title: 'Vusui',
  icon: 'vi-chain'
}

# 路由和菜单

# 配置项

# 路由

# 菜单

# 生成路由格式

# 菜单外链

路由和菜单

配置项

路由

菜单

生成路由格式

菜单外链