const removeHash = (route) => {
let url = location.href.split('#')[1] if (url) {
route.current = url;
history.replaceState({}, null, url)
}
}我们可以看到当浏览器后退的时候， history 模式会触发 popstate 事件，这个时候是通过 state 状态去获取 path 的，那么 state 状态从哪里来呢，答案是从 window.history 对象的 pushState 和 replaceState 而来，这两个方法正好可以用来实现 router 的 push 方法和 replace 方法，我们看一下这里它们的实现：
Router.prototype.push = (options) => {
this.history.current = options.path;
if (this.mode === 'history') {
history.pushState({
path: options.path
}, null, options.path);
} else if (this.mode === 'hash') {
location.hash = options.path;
}
this.route.params = {
...options.params
}
}Router.prototype.replace = (options) => {
this.history.current = options.path;
if (this.mode === 'history') {
history.replaceState({
path: options.path
}, null, options.path);
} else if (this.mode === 'hash') {
location.replace(`#${options.path}`)
}
this.route.params = {
...options.params
}
}
pushState 和 replaceState 能够实现改变url的值但不引起页面刷新，从而不会导致新请求发生， pushState 会生成一条历史记录而 replaceState 不会，后者只是替换当前url。在这两个方法执行的时候将 path 存入 state ，这就使得 popstate 触发的时候可以拿到路径从而触发组件渲染了。我们在组件内按照如下方式调用，会将 params 写入 router 实例的 route 属性中，从而在跳转后的组件 B 内通过
this.$route.params 可以访问到传参。
this.$router.push({
path: '/b',
params: {
id: 55
}
});router-link实现
router-view 的实现很简单，前面已经说过。最后，我们来看一下 router-link 的实现,先放上代码：
Vue.component('router-link', {
props: {
to: String,
tag: String,
}, render(h) {
let mode = this._self.$router.mode;
let tag = this.tag || 'a';
let routerHistory = this._self.$router.history;
return h(tag, {
attrs: tag === 'a' ? {
href: mode === 'hash' ? '#' + this.to : this.to,
} : {},
on: {
click: (e) => {
if (this.to === routerHistory.current) {
e.preventDefault();
return;
}
routerHistory.current = this.to;
switch (mode) {
case 'hash':
if (tag === 'a') return;
location.hash = this.to;
break;
case 'history':
