/**
** 参数含义
** state: 需要保存的数据，这个数据在触发popstate事件时，可以在event.state里获取
** title：标题，基本没用，一般传 null
** url：设定新的历史记录的 url
*/
window.history.pushState(state, title, url)
//假设当前的url是：https://www.abc.com/a/
//例子1
history.pushState(null, null, './cc/') //此时的url为https://www.abc.com/a/cc/
//例子2
history.pushState(null, null, '/bb/') //此时的url为https://www.abc.com/bb/
同样的，history 模式可以监听到对应的事件：
window.addEventListener("popstate", function() {
// 监听浏览器前进后退事件，pushState 与 replaceState 方法不会触发
});History 模式的注意点
和 Hash 模式相比，History 模式存在着更多的选择。但是也有一些自身的注意点：在用户点击强制刷新的时候，History 模式会向服务器发送请求。
为了解决这个问题，需要服务器做对应的处理。服务器可以针对不同的URL进行处理，当然，也可以简单处理：只要是未匹配到的URL请求，一律返回同一个 index.html 页面。
Vue Router 做了什么？
Vue Router 作为 Vue 生态系统中非常重要的一个成员，它实现了 Vue 应用的路由管理。可以说，Vue Router 是专门为 Vue 量身定制的路由管理器，功能点非常多。它的内部实现是与 Vue 自身是有强耦合关系的（Vue Router 内部利用了 Vue 的数据响应式）。
我们来看一个典型的 Vue Router 配置：
import Vue from "vue";
import App from "./vue/App.vue";
import VueRouter from 'vue-router';//以插件的形式，使用VueRouter
Vue.use(VueRouter);
//路由配置信息，可以从外部文件引入，在此直接写是为了方便演示
const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }
const routes = [
{ path: '/', component: Foo },
{ path: '/bar', component: Bar }
]
//初始化并与 Vue 实例关联
const router = new VueRouter({routes});
new Vue({
router,
render: h => h(App),
}).$mount("#root");
可看出，VueRouter 是作为插件的形式引入到 Vue 系统内部的。而将具体的 router 信息嵌入到每个 Vue 实例中，则是作为 Vue 的构造函数参数传入。
同时来看看如何使用它：
//routerExample.vue
<template>
<div>
<h1 @click="goBack">App Test</h1>
<router-link to="/">foo</router-link>
<router-link to="/bar">bar</router-link> <router-view></router-view>
</div>
</template>
