Hash 模式和 History 模式的区别表现形式的区别

Hash 模式
https://music.163.com/#/playlist?id=3102961863

History 模式
https://music.163.com/playlist/3102961863

原理的区别
hash 模式
Vue Router 默认使用的是 hash 模式，使用 hash 来模拟一个完整的 URL，通过onhashchange 监听路径的变化
History 模式
基于History
History API
history.pushState()
history.replaceState()history.go()

History 需要服务器的支持
单页应用中，服务端不存在 http://www.testurl.com/login 这样的地址会返回找不到该页面
在服务端应该除了静态资源外都返回单页应用的 index.html

实现思路
创建 LVueRouter 插件，静态方法 install
判断插件是否已经被加载
当 Vue 加载的时候把传入的 router 对象挂载到 Vue 实例上(注意:只执行一次)
创建 LVueRouter 类
初始化，options、routeMap、app(简化操作，创建 Vue 实例作为响应式数据记录当前路 径)
initRouteMap() 遍历所有路由信息，把组件和路由的映射记录到 routeMap 对象中
注册 popstate 事件，当路由地址发生变化，重新记录当前的路径
创建 router-link 和 router-view 组件
当路径改变的时候通过当前路径在 routerMap 对象中找到对应的组件，渲染 router-view

console.dir(Vue)
let _Vue = null
class VueRouter {static install(Vue){//1 判断当前插件是否被安装if(VueRouter.install.installed){return;}VueRouter.install.installed = true//2 把Vue的构造函数记录在全局_Vue = Vue//3 把创建Vue的实例传入的router对象注入到Vue实例// _Vue.prototype.$router = this.$options.router_Vue.mixin({beforeCreate(){if(this.$options.router){_Vue.prototype.$router = this.$options.router}}})}constructor(options){this.options = optionsthis.routeMap = {}// observablethis.data = _Vue.observable({current:"/"})this.init()}init(){this.createRouteMap()this.initComponent(_Vue)this.initEvent()}createRouteMap(){//遍历所有的路由规则 吧路由规则解析成键值对的形式存储到routeMap中this.options.routes.forEach(route => {this.routeMap[route.path] = route.component});}initComponent(Vue){Vue.component("router-link",{props:{to:String},render(h){return h("a",{attrs:{href:this.to},on:{click:this.clickhander}},[this.$slots.default])},methods:{clickhander(e){history.pushState({},"",this.to)this.$router.data.current=this.toe.preventDefault()}}// template:"<a :href='to'><slot></slot><>"})const self = thisVue.component("router-view",{render(h){// self.data.currentconst cm=self.routeMap[self.data.current]return h(cm)}})}initEvent(){//window.addEventListener("popstate",()=>{this.data.current = window.location.pathname})}
}