前端路由跳转

前端路由跳转

      目前是两种方式,一种是hash模式,一种是history模式。

1. 两者比较明显的区别是：在一般人的认知里 hash 和 history 的认知可能就在 hash 的 url 里面多了个 # ，而 history 就不会。

2. 对于前端路由来说， hash 和 history 都可以用于前后端分离项目，且两者有各自的特点和各自的使用场景，在使用过程中主要要了解当前项目所处的场景，以便于更好地判断使用哪一种路由模式更佳。

3. (1)hash是在一个固定的url的后面改变hash值,hash变化并不会导致浏览器发请求

   (2)hash的变化能被监听,会触发window.hashChange事件.

   (3)hash值并不会被放在http请求中

所以我们只需要在window.hashChange写相关逻辑,拿到对应的hash值,然后分配给主页面不同的组件就能实现前端的路由切换.

缺点:hash有个明显的缺点,它是个string,而且是直接拼接到url上的,也就是说如果我要传递参数,将会受到长度限制,而且只能通过字符串拼接.
Markdown将文本转换为 HTML

4. (1)处理默认事件.和hash模式不同,当前情况下如果直接点击a标签会发生跳转,刷新页面.所以要阻止a标签默认跳转.

   (2)因为hash改变的hash值,而location改变的pathname,如果不做任何处理,浏览器会发出请求,但是pushState()和replaceState()这两个api会特殊处理,让其修改的时候不会向服务器发送请求.

   (3)因为api提供了额外的参数可以接收跳转传参,而且因为单独存在对象中.所以就没有长度和数据类型限制.然后再通过window.onpopstate的event.state去拿到当前路径下的传进来的参数.

   (4)分配组件,传递参数.

   缺点:和hash模式一样,它修改了url,但是hash是不会包在http请求里的,
   可history修改的pathname是会的.
   虽然你路由跳转并不会向服务器发送请求,但是当页面刷新时,
   肯定会发请求,而且浏览器的url又是修改过的.
   这时候就可能出现页面404的问题.