Hash 与 History
路由原理
实现路由
/** * 1、前端路由与后端路由的区别 后端路由: 输入url => 请求发送到服务器 => 服务器解析请求路径 => 拿到对应页面 => 返回出去 前端路由： 输入url => js解析地址 => 找到对应地址页面 => 执行页面生成的js => 看到页面 区别： 1、前端路由不用发请求，直接在浏览器访问解析； 2、前端路由里有hash *//** * 2、Hash和History hash: 1、址栏里出现#，表示hash，#后面就是hash内容； 2、可以通过location.hash拿到； 3、可以通过onhashchange监听hash改变； 特点： hash模式下不会发送请求； history: 1、history即正常地址栏路径； 2、location.pathname获取路径； 3、可以用onpopstate监听history变化； 特点： *//** * 3、vue插件基础知识 1、Vue.use(参数) => 使用一个插件； 如果参数为一个方法，则会被执行； 但是无论参数为任何东西，只要有install属性，则优先会执行install方法； 2、ue.mixin() => 往vue全局中混入属性，可以将一些常用方法注入到vue中，通过this可以访问到； 核心是用来自定义生命周期 var a = function(){ console.log('aaa'); } a.install = function(){ console.log('install'); vue.mixin({ data: ()=>{ return b: 1111 //在vue整个项目中都能访问到b这个属性 } }) } Vue.use(a); //会打印出install *//** * 4、vue源码分析 1、Vue.util //表示vue中工具类 共有四个： warn extend mergeOptions defineReactive vue.extend(); // vue.util.extend(); //浅拷贝 *//** 5、手写router插件*/class HistoryRoute{ constructor (){ this.current = null; }}//options 表示 new Routers里传入的值class vueRouter { constructor (options){ this.mode = options.mode || 'hash'; this.routers = options.routers || []; this.history = new HistoryRoute; this.routersMap = this.creatMap(this.routers); this.init(); } init(){ if(this.mode == 'hash'){ //自动加# location.hash ? '' : location.hash = '/'; window.addEventListener('load',() => { this.history.current = location.hash.slice(1); }) window.addEventListener('hashchange',() => { this.history.current = location.hash.slice(1); }) } } creatMap(routers){ return routers.reduce((m,current)=>{ m[current.path] = current.component; return m; }) }}vueRouter.install = function(Vue){ //写插件要注意判断插件是否已经注册 if(vueRouter.install.installed) return; vueRouter.install.installed = true; Vue.mixin({ beforeCreate(){ if(this.$options && this.$options.router){ //当前this指向vue实例 this._root = this; this._router = this.$options.router; Vue.util.defineReactive(this,'current',this._root.history); //第三个参数作为children,一层层查找 }else{ this._root = this.$parent._root; //如果没有找到，向上查找一直找到为止； } } }) Vue.component('router-view',{ render(h){ let current = this._self._root._router.history.current; console.log(current); let routerMap = this._self._root._router.routersMap; return h(routerMap[current]); } });}export default vueRouter;
来源：https://www.cnblogs.com/fmixue/p/12024469.html