vue的两种路由形式hash和history形式以及它们的底层完结原理

一.hash 形式：在浏览器中符号“#”，#以及#后边的字符称之为 hash， 用 window.location.hash 读取。特色：hash 虽然在 URL 中，但不被包括在 HTTP 恳求中；用来指导浏览器动作，对服务端安全无用，hash 不会重加载页面。路由的哈希形式其实是利用了window.onhashchange事情，也便是说你的url中的哈希值（#后边的值）如果有改变，就会自动调用hashchange的监听事情，在hashchange的监听事情内能够得到改动后的url，这样能够找到对应页面进行加载

二.history 形式：history 选用 HTML5 的新特性；且提供了两个新方法： pushState()， replaceState()能够对浏览器历史记载栈进行修改，以 及 popState 事情的监听到状态改动pushState方法、replaceState方法，只能导致history对象发生改变，然后改动当时地址栏的 URL，但浏览器不会向后端发送恳求，也不会触发popstate事情的履行

popstate事情的履行是在点击浏览器的行进后退按钮的时候，才会被触发

在vue的router中，经过修改vueRouter的mode特色来决定运用history仍是hash。默以为hash形式。

const router = new VueRouter({
    mode: 'history',
    base: process.env.BASE_URL,
    routes
})
export default router

1.hash 路由形式的完结主要是依据下面几个特色：

  • URL 中的 hash 值只是客户端的一种状态，向服务端发送恳求的时候，hash 部分不会被发送。
  • hash 值得改动会在浏览器的历史记增加拜访记载，所以能够经过浏览器的回退、行进操控 hash 值的改动。
  • 能够经过 a 标签设置 href 值或许经过 js 给location.hash 赋值来改动 hash 值。
  • 能够经过hashchang 事情来监听 hash 值的改变，然后对页面进行跳转（烘托）。

2.history 路由形式的完结主要是依据下面几个特色：

  • 经过 pushState 和 replaceState 两个API 来操作完结 URL 的改变。
  • 能够经过 popstate 事假来监听 URL 的改变，然后对页面进行跳转（烘托）。
  • history.pushState() 或 history.replaceState() 不会触发 popstate 事情，需要手动触发页面跳转

hash和history的区别

1.形式上：hash形式url里面永远带着#号，开发傍边默许运用这个形式。如果用户考虑url的标准那么就需要运用history形式，因为history形式没有#号，是个正常的url，合适推行宣传；
2.功能上：比如咱们在开发app的时候有共享页面，那么这个共享出去的页面便是用vue或是react做的，咱们把这个页面共享到第三方的app里，有的app里面url是不允许带有#号的，所以要将#号去除那么就要运用history形式，但是运用history形式还有一个问题便是，在拜访二级页面的时候，做刷新操作，会呈现404错误，那么就需要和后端人配合，让他装备一下apache或是nginx的url重定向，重定向到你的主页路由上就ok了

运用场景

一般场景下，hash 和 history 都能够，除非你更介意颜值，# 符号夹杂在 URL 里看起来的确有些不太美丽。

如果不想要很丑的 hash，咱们能够用路由的 history 形式，这种形式充分利用 history.pushState API 来完结URL 跳转而无须重新加载页面。 Vue-router 别的，依据 Mozilla Develop Network 的介绍，调用 history.pushState() 相比于直接修改 hash，存在以下优势:

pushState() 设置的新 URL 能够是与当时 URL 同源的任意 URL；而 hash 只可修改 # 后边的部分，因此只能设置与当时 URL 同文档的 URL
pushState() 设置的新 URL 能够与当时 URL 一模一样，这样也会把记载增加到栈中；而 hash 设置的新值有必要与原来不一样才会触发动作将记载增加到栈中
pushState() 经过 stateObject 参数能够增加任意类型的数据到记载中；而 hash 只可增加短字符串
pushState() 可额定设置 title 特色供后续运用

总结

传统的路由指的是：当用户拜访一个url时，对应的服务器会接收这个恳求，然后解析url中的途径，然后履行对应的处理逻辑。这样就完结了一次路由分发

而前端路由是不触及服务器的，是前端利用hash或许HTML5的history API来完结的，一般用于不同内容的展现和切换