# 路由说明

路由是前端系统的核心,没有路由系统将无法运行。所以,前端开发有必要完全掌握路由使用和定义。

# 静态路由

TIP

系统静态路由在 @/src/router/systemRouter.js (opens new window) 下定义

静态路由不受动态权限控制(除硬编码外),主要适用于公共页面,并且不需要权限控制的功能。

# 定义静态路由

... // 其他路由

{
    name: "test",                    // 路由名称(标识符) 唯一
    path: "/test",                   // 路由地址,浏览器访问的地址,要唯一
    meta: {
        title: "标题",               // 路由标题,显示在浏览器标题栏
        icon : "图标",               // 路由图标
    },
    component: () => import('@/views/test/index'),   // 路由绑定的页面组件地址
}

... // 其他路由
1
2
3
4
5
6
7
8
9
10
11
12
13

# 动态路由

TIP

动态路由需要在菜单管理添加与修改,是跟用户角色等功能息息相关,并且动态路由受权限动态控制。

与静态路由不同的是,动态路由表完全存放在后台数据库,每次刷新页面都会从后台请求当前登录用户的路由列表,Vue通过分析路由结构给动态添加到路由器里