一、实现原理
SPA单页面应用程序,只有一个完整的页面,所有组件的展示与切换都在这个页面中完成。不同组件的切换要依赖前端路由完成。前端路由有两种模式:hash模式和history模式,通过修改mode参数来决定使用哪种模式。
1、Hash模式:
使用url的hash来模拟完整的url,hash(#)是url的锚点,代表页面中的一个位置,改变#后的部分,浏览器会滚动到相应位置,但不会重新加载页面。hash模式通过锚点值的改变,渲染指定DOM位置的数据。
2、History模式:
利用浏览器的pushState方法来完成url跳转。需要服务端对路由进行全覆盖处理,如果url匹配不到静态资源则返回同一个页面,否则会返回404。
二、优缺点
1、pushState设置的url可以是与当前url同源的任意url,而hash只能修改#后面的部分。
2、pushState设置的url可以与当前url相同,这样也会把记录添加到栈中,而hash设置的值必须与原来不同才会将记录添加到栈中。
3、pushState通过stateObject参数可以添加任意类型的数据到记录中,而hash只能添加短字符串。
4、pushState可额外设置title属性供后续使用。
5、hash模式下,仅#前部分会被包含在请求中,因此即使没有对路由全覆盖,也不会返回404。而history模式下,必须进行全覆盖处理。