history.go(-2);//后退兩次
history.go(2);//前進兩次
history.back(); //后退
hsitory.forward(); //前進

/**
 ** 參數(shù)含義
 ** state: 需要保存的數(shù)據(jù)，這個數(shù)據(jù)在觸發(fā)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/

window.addEventListener("popstate", function() {
// 監(jiān)聽瀏覽器前進后退事件，pushState 與 replaceState 方法不會觸發(fā) 
});

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 實例關聯(lián)
const router = new VueRouter({routes});
new Vue({
 router,
 render: h => h(App),
}).$mount("#root");

//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>

<script>
export default {
 methods: {
  goBack() {
   console.log(this.$router); 
   window.history.length > 1 ? this.$router.go(-1) : this.$router.push('/')
  }
 }
}
</script>

<style lang="less" scoped>

</style>

//FVueRouter.js

 let Vue; //保存 Vue 構造函數(shù)的引用，與 Vue 深度綁定

 class FVueRouter {
  constructor(options){
    this.$options = options;
    //保存路由的路徑與路由組件的對應關系
    this.routerMap = {};

    //當前的URL必須是響應式的，使用一個新的 Vue 實例來實現(xiàn)響應式功能
    this.app = new Vue({
      data: {current : "/"}
    })
  }

  init(){
    //監(jiān)聽路由事件
    this.bindEvents();
    //解析傳入的routes
    this.createRouterMap();
    //全局組件的聲明
    this.initComponent();
  }

  bindEvents(){
    window.addEventListener('hashchange', this.onHashChange.bind(this));
  }

  onHashChange(){
    this.app.current = window.location.hash.slice(1) || '/';
  }

  createRouterMap(){
    this.$options.routes.forEach(route => {
      this.routerMap[route.path] = route;
    })
  }

  initComponent() {
    // 形式：<router-link to="/"> 轉(zhuǎn)換目標=> <a href="#/" rel="external nofollow" >xxx</a>
    Vue.component("router-link", {
     props: {
      to: String,
     },
     render(h) {
      // h(tag, data, children)
      return h('a', {
        attrs: {href: '#' + this.to}
      }, [this.$slots.default])
     },
    });
    // 獲取path對應的Component將它渲染出來
    Vue.component("router-view", {
      render: (h) => {
        //此處的this 能夠正確指向 FVouter內(nèi)部，是因為箭頭函數(shù)
        const Component = this.routerMap[this.app.current].component;
        return h(Component)
      }
    })
   }
 }

 // 所有的插件都需要實現(xiàn)install 方法，傳入?yún)?shù)是Vue的構造函數(shù)
 FVueRouter.install = function(_Vue){
  //將Vue的構造函數(shù)保存起來
  Vue = _Vue;

  //實現(xiàn)一個混入操作的原因，插件的install階段非常早，此時并沒有Vue實例
  //因此，使用mixin，延遲對應操作到Vue實例構建的過程中來執(zhí)行。
  Vue.mixin({
    beforeCreate(){
      //獲取到Router的實例，并將其掛載在原型上
      if(this.$options.router){
        //根組件beforeCreate時只執(zhí)行一次
        Vue.prototype.$router = this.$options.router;

        this.init();
      }
    }
  })
 }

export default FVueRouter;