前端路由

路由概念最先是后端出现的，即用不同路径请求后台资源，后台通过模板引擎渲染返回画面。前端路由的出现要从 ajax 开始，最初是实现页面交互无刷新，随着 MVVM（Model-View-ViewModel）以及单页面应用（SPA）概念出现，不仅仅是实现页面交互是无刷新，页面跳转也是无刷新的。

前端路由在很多开源的js类库框架中都得到支持，如angularJS，Reactjs等等

实现方式#

前端路由有两种主流实现方式：Hash 和 History API。

路由里的 # 称为 hash，window.location 处理 hash 值的变化时不会导致浏览器向服务器发出请求，浏览器不会刷新页面。 hash 值的变化会触发 hashchange 事件，通过这个事件完成页面的跳转。

https://proding.net/#/setting/members

2014年后 HTML5 新增两个 API history.pushState 和 history.replaceState，这两个 API 可操作浏览器的历史记录，而不会引起页面的刷新。

IE9及以下版本都是不支持 Html5 History Api。

搜索引擎在抓取页面的时候，是不执行js的。换句话说，搜索引擎从 https://proding.net/#/setting/members 网址进去页面还未渲染成功，抓去不到实际的 member 数据。

菜单（menu）是菜单项（menu item）的分类，菜单项连接具体页面。项目中约定整个层级最大为 3，即 2 层菜单 + 1 层菜单项。

类型	URL规则	示例
二级菜单	:menu/:menu-item	`/system/users` 系统-用户管理
三级菜单	:menu/:menu/:menu-item	`/system/setting/logs` 系统-设置-日志

当访问菜单（:menu/ 或 :menu/:menu/）时系统需要自动路由到菜单下的第一个菜单项，以下图为例 menu/ = /menu/menu-item1。

menu
  |-menu-item1
  |-menu-item2
  |-menu-item3

实体管理（增、删、改、査）相关页面的路由规则。此规则通常运用于运营管理后台。

类型	URL规则	示例
列表页面	:entities	`/users` 用户列表页面
单个实体详情页面	:entities/:id/detail	`/users/BNZD9LXCMMTEDIYW/detail` 用户详情页面
增加页面	:entities/add	`/users/add` 用户增加画面
编辑页面	:entities/:id	`/users/BNZD9LXCMMTEDIYW` 用户编辑画面
列表页面中的页卡	:entities/:tab	`/users/disabled` 无效用户列表
编辑页面中的页卡	:entities/:id/:tab	`/users/BNZD9LXCMMTEDIYW/career` 用户编辑页面的职历页卡
详情页面中的页卡	:entities/:id/detail/:tab	`/users/BNZD9LXCMMTEDIYW/detail/career` 用户详情页面的职历页卡
详情页面中的页卡上的锚点	:entities/:id/detail/:tab#rewards	`/users/BNZD9LXCMMTEDIYW/detail/career#rewards` 用户详情页面的职历页卡上所获荣誉

系统中还有其他各种各样的页面，这些页面基本可归为 2 类：展示性页面和操作性页面。展示型的路由路径用名字来呈现，操纵型页面通过动词来呈现。