vue-router的history模式

路由

路由（routing）就是通过互联网把信息从源地址传输到目的地址的活动。

即url中的#以及后面部分，#相当于一个锚点，#后面的内容就是锚点值，当监听锚点值的变化就会改变局部的页面数据。当浏览器向服务器发送请求时，只会把#前面部分发送给服务器，一般前面部分的是不变的，所以hash 值变化不会导致浏览器向服务器发出请求。 hash 改变会触发 hashchange 事件。

https://www.xxx.com#/hashtag

    window.onhashchange = function() {
     console.log(location.hash);
    }

location.hash = '/anotherhashtag'

HTML5 Mode是html5新增 history模式，所以也称为history 模式。history 模式改变 url 的方式会导致浏览器向服务器发送请求，但是history 模式可以传输复杂一些的数据，而且比hash模式美观（因为没有#）。

window.addEventListener("popstate", ()=> {
    console.log(window.location.pathname);
})

触发时机：点击浏览器前进、后退按钮； history.back()； history.forward()； history.go()；

可以通过调用history.pushState()和history.replaceState()，在history历史栈中添加或者更新最后一条记录，但是这两个api不会触发popstate事件。

history.pushState({},"title", "anotherpage.html")
history.replaceState({},"title", "anotherpage.html")

Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。

传统的web开发路由都是由后端进行控制的，随着ajax技术的普及，用户无刷新有更好的体验。逐渐路由由后端走向前端，前端需要自己管理路由了。

vue-router中有个监听器，用来监听History的变化（浏览器地址改变、点击前进后退按钮）。当监听到History变化之后，vue-router就会依据路由表当中声明了的路由对应匹配的组件，然后使用RouterView组件来对Vue Page的一个渲染（render）

路由表主要是构建路由对应组件的关联关系

支持hash模式和HTML5模式，默认hash模式（使用 URL 的 hash 来模拟一个完整的 URL，于是当 URL 改变时，页面不会重新加载。）

如果不想要很丑的 hash，我们可以用路由的 history 模式

const router = new VueRouter({
  mode: 'history',
  routes: [...]
})

但是这种模式还需要后台配置支持，因为我们的应用是个单页客户端应用，如果后台没有正确的配置，当用户在浏览器直接访问 http://oursite.com/user/id 就会返回 404，这就不好看了。

注意：要给出一个 404 页面用来跳转。

HTML5 History 模式：router.vuejs.org/zh/guide/es…

哈希路由（hash模式）和历史路由（history模式）的区别：www.cnblogs.com/GGbondLearn…