vue - 路由模式

1 路由的基本概念与原理

路由的本质就是对应关系; 在开发中, 路由分为前端路由和后端路由.

1.1 前端路由

概念: hash地址和组件之间的对应关系;

1.2 后端路由

概念: 根据不同的用户URL请求,返回不同的内容;
本质: URL请求地址和服务器资源之间的对应关系;

2 路由模式及实现方式

2.1 hash模式

hash模式基于location.hash来实现; location.hash的值就是url中#后面的内容.

特点:
a. url中的值只是客户端的一种状态,当向服务器发送请求时,hash部分不会被发送; 因此, 对于后端来说,即使没有做到对路由的全覆盖,也不会返回404错误;
b. hash值得改变,都会在浏览器的访问记录中增加一个记录; 因此, 我们可以通过浏览器的回退,前进按钮控制hash的切换;
c. 通过hashchange事件来监听hash值得变化,从而对页面进行跳转(渲染).

2.2 histroy模式

通过改变vuerouter中的mode模式(mode:histroy) 来取消页面中url的'#';
url路径中不会有"#",依赖于HTML5中的history,pushState API;
history常用方法:
a. history.go(-3) // 后退三次;
b. history.go(3) // 前进三次;
c. history.back() // 后退一次;
d. history.forward() // 前进一次;
特点:
a. history模式采用HTML5的新特性,通过popState事件来监听url的变化,从而对页面进行跳转(渲染)
b. 通过pushState()和replaceState()两个api来操作实现url的变化,可以对浏览器历史记录栈进行修改;
c. histroy.pushState()和histroy.replaceState()不会触发popstate事件,需要我们手动触发页面跳转(渲染);

注意:
history模式下,前端的URL必须和实际向后端发起请求的URL一致;如不一致,会出现异常,如:
http://www.xxx.com/items/id。后端如果缺少对 /items/id 的路由处理，将返回 404 错误。

2.3 abstract模式

适用于所有js环境,例如服务器端使用node.js,如果没有浏览器API,路由器将自动被强制进入此模式

参考
vue-router路由