路由创建

提醒

请确保阅读了本文档的路由概述

项目的路由文件路径：

src -> router -> route.ts

路由结构

该文件为路由的静态文件，路由有两种层级区分

1、顶层路由

2、二级路由-主要渲染路由

顶层路由

顶层路由为 "/" 用于做路由重定向，顶层路由的重定向为顶层路由children数组的第0号位，该位置一般用作项目首页，例如：home页

顶层路由只有一个，所有的二级路由全部在顶层路由的children内部。

二级路由-主要渲染路由

二级路由为菜单路由，也是项目的主要渲染路由，项目中的左侧菜单就是根据二级路由渲染而来，当然，渲染是经过路由权限处理的。

如果你要新增一个菜单，在二级路由中新增一项即可，在新增的过程中，你需要注意路由权限表示，关于权限标识，请看路由概述中的描述。

示例：

{
    path: "/mypage", // 路由
    name: "mypage",  // 页面name
    component: () => import("@/views/mypage/mypage.vue"), // 页面路径
    meta: {
        title: "mypage",            // 国际化
        hide: false,                // 是否隐藏此路由
        keepAlive: false,           // 缓存组件状态
        affix: true,                // 固定在tagesView栏上
        link: "",                   // 外链url
        iframe: false,              // 是否内嵌窗口
        roles: ["admin", "common"], // 路由权限
        svgIcon: "home",            // 菜单图标
        sort: 1                     // 路由排序
    }
}

国际化

src -> lang -> modules
enUS.ts // 英文
zhCN.ts // 中文

目前国际化提供了中英双语切换，如果你有更多语言需求，可以自行修改。

在添加路由的时候，title指向的国际化中的对应标识符，例如：title: "home"

zhCN.ts文件中 home 指向：首页

enUS.ts文件中 home 指向：home

国际化中的的对象为表达式key以便适应多元化需求，你也可以使用普通语法，效果相同。

页面缓存

keepAlive： true

路由中开启了缓存标识，tabs栏切换页面时，页面将被缓存。

注意：页面缓存还与tabs的开启相关，如果tabs栏开启，keepAlive开启，页面会被缓存。
本项目tabs栏是默认开启的。

固定标签

affix： true

路由中开启了固定标签标识，tabs栏中的页面将不可被关闭。

外链&内链页面

link： 'https://gitee.com/wang_fan_w/SnowAdmin',
iframe: true

路由中开启了外链url不为空且iframe开启，表示该路由是内嵌外部页面。

link： 'https://gitee.com/wang_fan_w/SnowAdmin',
iframe: false

路由中开启了外链url不为空且iframe关闭，表示该路由是外部页面，页面不会被缓存且不会出现在tabs栏中，页面会立刻打开一个新窗口并跳转指定url。

角色权限

roles: ["admin", "common"]

若路由中添加了角色权限标识，用户登录后会根据账号上的角色判断路由权限，在路由权限逻辑中会过滤出只符合当前登录角色的路由，菜单会根据指定角色权限渲染。

菜单图标

svgIcon: "home"
icon: "home"

系统中有两种图标资源可供使用：svg、icon

1、svg

svg的存储目录

src -> assets -> svgs

路由只需要添加上svg的name则会自定指向svg图标

2、icon

icon使用的是arco-design的自带icon，只需要将icon的name写过来就会自动显示。

以上两种模式是可选的，可以仅仅只设置svgIcon，也可仅设置icon，若两种图标同时存在，则svgIcon优先。

路由创建 ​

路由结构 ​

国际化 ​

页面缓存 ​

固定标签 ​

外链&内链页面 ​

角色权限 ​

菜单图标 ​