Sable Admin 文档：路由设置

路由设置文件在 /src/router/models/

路由 meta 说明

路由 meta 可以书写一些路由的属性，ts 配置文件在 /types/typings.d.ts

import "vue-router"

declare module "vue-router" {
  interface RouteMeta {
    // 访问权限
    auth?: boolean // 登录用户可访问
    guest?: boolean // 游客可访问

    permissions: string[] // 可访问权限

    type: "layout" | "menuItem" // 菜单类型
    // 和菜单相关
    menu?: {
      showParentMenu: boolean // 是否显示一级菜单， default => true
      title: string // 页面标题
      icon: string // icon
      show?: boolean // 是否在菜单中显示 为false或不设置不在菜单中显示 default => true
      key?: string // 菜单唯一标识
      order?: number // 菜单排序

      keepAlive?: boolean // 是否可以缓存
      showTag?: boolean // 是否在历史菜单中显示 default => true
    }
  }
}

自动引入

在 /src/router/models/ 文件夹中放置的路由配置文件会被自动加载，无需在在别处引入

注意

目前只支持文件类型，对文件夹的支持还未完成

外链

本项目支持在路由侧展示外链，具体写法如下

该路由是外链时，path 字段即为该网址。该路由不会在历史菜单中显示！

说明

这里引入 Blank 空白布局是为了避免浏览器控制台中报错，你也可以引入任何一个视图文件来规避这个问题。

import Blank from "@/layouts/blank.vue"
import { RouteRecordRaw } from "vue-router"

export default {
  path: "",
  component: () => import("@/layouts/default/index.vue"),
  name: "links",
  meta: {
    menu: { title: "外链", order: 99, showParentMenu: false, icon: "ion:link" },
    type: "layout",
  },
  children: [
    {
      name: "whbit",
      path: "https://whbbit.cn",
      component: Blank,
      meta: { menu: { title: "whbbit主页" } },
    },
    {
      name: "vue",
      path: "https://cn.vuejs.org/",
      component: Blank,
      meta: { menu: { title: "vue官网", icon: "logos:vue" } },
    },
  ],
} as RouteRecordRaw