路由
路由:用于分发请求。
前端路由:根据用户的不同访问目标展示相应的视图。
实现方法:通过URL确定相应的div。
hash模式路由实现思路
从 hash(锚点)得到 div 的地址,从而确定 div。点击 a 标签,改变 hash。
window.location.hash
可获取当前的 hash 值(以#
开头)
监听hash变化事件hashchange
,当hash变化时,展示相应的div。
相关概念
1、默认路由
默认情况下URL没有hash,此时取一个默认hash。
2、404路由/保底路由
若用户访问了不存在的hash,则取一个错误值, 展示错误界面。
3、路由表
用一个对象表示 hash 和 div 的对应关系
const routerTable = {
'1': div1,
'2': div2,
'3': div3,
'4': div4
}
4、子路由/嵌套路由
同一个 div 中又有很多个不同的子 div,实现方法较复杂,略。
hash/history/memory 模式区别
1、hash模式
任何情况下都可以用hash模式做路由。
【缺点】:SEO不友好,因为服务器收不到 hash
2、history 模式
如果后端将所有前端路由都渲染到同一个HTML(即无论URL最后的路径如何,都能定向到同一个HTML),则可以用 history 模式做路由。
【缺点】:IE 8 不支持
实现方法
从路径得到 div 的地址,从而确定 div。点击 a 标签,改变路径。
用window.location.pathname
可以获取当前的路径(以/
开头)。
【问题】:
每次点击 a 标签,页面会刷新(因路径变了,会重新发起请求)。
【解决】:
浏览器提供了 history API,可以在不刷新页面的情况下改变URL。
首先阻止a标签的默认点击动作(阻止刷新),然后用window.history.pushState
改变URL(此时不会刷新页面),再执行路由。
3、memory 模式
从 Local Storage 得到 div 的地址,从而确定 div。点击 a 标签,改变 Local Storage。不常用。