hash:任何情况下都可以做前端路由,缺点是SEO不友好(服务器收不到hash,浏览器是不会把#后面的内容发给服务器)

history模式:后端将所有前端路由都渲染到同一个页面(不能是404页面),缺点是IE8以下不兼容。

路由:分发请求

hash模式

#后面的就是hash

举例:

f379265a745c84e7ae2a47065c66deb0.png

1b297499512c29ea85dc3f592598e30e.png

监听变化

f28fbf61926cd6ce301a92adcedf4b50.png
hash路由的简单例子​codesandbox.io

默认路由,用户没有设置#时

234b7ebf7b8c3f3e9c678a0bcbeee795.png

404路由(保底路由)

90265f74f7995d67ee43f1cb3bc72c42.png

523368cd8d91760456ec62e0f3eb169e.png

优化所有代码

3f6c3a0df662428f642cd99dfb991e62.png

路由表

div的对应关系是可以自定义的,做一个hash表,利用表驱动编程

565ac3246aed0c1e9a938db9a0aa66a0.png

container用来使用嵌套路由

eeac355dfd16b95e0359b7231affbc91.png

history模式

number修改成从pathname里获取

1c6357af06034b1d1fdb117cd19106f4.png

#改成/

7acf402b00f90f7091df2c5a389970d5.png

遍历所有的a标签阻止默认动作

f1d3cfb36daeb6dbde1fe37afc7a602e.png

路径在不刷新的情况下,改变url进行变更

eb4673425d53d20c5ac717634f0050b9.png

监听并重新路由

a06eeb095c7cf0c5280c455235b33caa.png

memory模式

首先number不从路径里获取,从localStorage里获取

69e6303e983a17b459dc84233efdeb1f.png

3e29f22b6959f07faef9600e106fd2bc.png

三者区别

hash和history都是把路径存在url上面,而memory模式路径没有放在url上而是在localStorage里,缺点是没有url是一个单机版的路由

Logo

腾讯云面向开发者汇聚海量精品云计算使用和开发经验,营造开放的云计算技术生态圈。

更多推荐