一个单页应用（SPA，SinglePageApplication）的整个web系统由一个html文件组成，通过Ajax与后台进行交互，使用一些特殊的手段来加载和加载渲染页面的不同部分，使整个页面无需刷新，就像使用应用程序一样，大大提高了用户体验。在Vue生态中，使用了Vue的核心插件——Vue-Router来实现web界面的路由跳转。所以，本文就是通过学习Vue-Router来了解Vue-Router如何完成SPA开发的具体原理。Web路由简介先简单说一下路由。早期的Web系统路由主要是在服务器后端实现的。熟悉前后端开发的朋友都会知道，在服务端，通过路由表将对应的方法映射到对应的方法，执行对应的动作。比如我们要请求API数据、新建页面、文件等："/"->goHtml()"/api/users"->queryUsers()客户端实现路由主要有两种方式：1.基于WebUrl的hash2。基于WebUrlhash的HashtoryAPIUrl中的hash值是“#”后面的参数值，比如http://www.example.com/index.html#location1中的值localtion1，主要有以下特点（之前在公司项目的Url中看到了“#”，虽然有点莫名其妙，但是没想到，汗）：1、Url中#后面的内容不会发送到服务器;2.哈希值的变化会保存在浏览器的历史浏览记录中，可以通过浏览器的后退按钮查看；3、hash值可读可写，通过window.location.hash获取hash值，onhashchange用于监听hash值的变化（Vue-Router中的hash方式是完成更新渲染onhashchange回调事件中接口的路由）。基于HishtoryAPIHash-based方式方便，但是加上#号，有些同学会觉得这样的Url有点难看。为了与请求到服务器后端的Url样式保持一致，可以使用HishtoryAPI方式。使用基于HistoryAPI的浏览器历史API主要是操作HTML5，可以在不刷新地址的情况下更新地址栏，例如：//pushStatestate:用于描述新记录的一些特性。//该参数将被添加到历史记录中以备将来使用。//这个参数是开发者根据自己的需要自由给定的。//pushState的作用相当于修改“#”后面的值window.history.pushState(state,"title","/userPage");//比如浏览器返回window.addEventListener("popstate",function(e){varstate=e.state;//dosomething...});//replaceState方法只进行Url替换而不产生新的浏览记录相对于pushStatewindow.history.replaceState(null,null,"/userPage");两种模式的对比下面简单对比一下这两种模式的一些特点：|模式VS|散列|历史API||------|------|------||美学|识别为略显丑陋，带有#号|比较漂亮||兼容性|好|需要浏览器支持HTML5||错误网址后端支持|否|是|事情已经尘埃落定，下一步才是重点。Vue-Router的内部路由就是基于这两种模式！所以提前知道前端路由的两种模式，也算是打了一个预防针。Vue-Router我们先来回顾一下使用Vue-Router的四个步骤：importVuefrom'vue';importVueRouterfrom'vue-router'//1.使用Vue-Router插件Vue.use(VueRouter)//2.VueRouter实例化constrouter=newVueRouter({model:'history',//路由模式hash\historyroutes:[{name:'xx',path:'path',component:component}]});//3.实例化Vue实例时使用router路由newVue({...router,});//4.路由通过Vue.$router.push('xx')或router-link接下来，就通过以上四步一一窥视Vue-Router的一些具体实现细节。使用Vue-Router插件Vue-Router遵循Vue插件的开发规范，通过调用Vue内部方法Vue.use()（实际上是回调VueRouter中定义的install方法）来安装VueRouter。这个过程完成了VueRouter的挂载工作。->vue\src\core\global-api\use.jsVue.use=function(plugin:Function|Object){...plugin.install.apply(plugin,args);...}回到VueRouter源码，分析install过程的执行流程：Vue){//如果实例已经注册，则返回if(install.installed&&_Vue===Vue)returninstall.installed=true_Vue=VueconstisDef=v=>v!==undefinedconstregisterInstance=(vm,callVal)=>{//父虚拟节点leti=vm.$options._parentVnodeif(isDef(i)&&isDef(i=i.data)&&isDef(i=i.registerRouteInstance)){i(vm,callVal)}}Vue.mixin({//路由钩子函数会在vue执行beforeCreate钩子函数回调时一起调用，因为beforeCreate是一个数组beforeCreate(){Vue.$options=optionsif(isDef(this.$options.router)){this._routerRoot=thisthis._router=this.$options.router//调用initthis._router.init(this)//调用Vue内部的util方法使当前url响应Vue.util.defineReactive(this,'_route',this._router.history.current)}else{this._routerRoot=(this.$parent&&this.$parent._routerRoot)||this}//注册实例registerInstance(this,this)},destroyed(){registerInstance(this)}})//挂载$router和$route到Vue的原型链Object.defineProperty(Vue.prototype,'$router',{get(){returnthis._routerRoot._router}})Object.defineProperty(Vue.prototype,'$route',{get(){returnthis._routerRoot._route}})//注册路由视图和路由链接组件Vue.component('RouterView',View)Vue.component('RouterLink',Link)//实现Vue的选项合并策略conststrats=Vue.config.optionMergeStrategies//使用同路由hooks的hook合并策略strats.beforeRouteEnter=strats.beforeRouteLeave=strats.beforeRouteUpdate=strats.created}可以看出install内部主要做了三件事：就是利用Vue的mixin方法混入全局beforeCreate和销毁，第一次加载执行beforeCreate时指定_routerRoot是当前Vue实例，执行Vue-Router的init初始化工作（install的核心是init初始化，具体细节后面会介绍），在beforeCreate方法中，主要是对父组件（也就是,router挂载的节点）进行初始化操作，将当前的_routerRoot设置为对应的组件实例。在这个过程中，初始化init路由的一些配置（比如设置路由模式等），其他组件比如（router-link,router-view）会设置_routerRoot为包含router的父（ancestor）组件options参数中的option），然后执行registerInstance方法。该方法中的registerRouteInstance实际上是router-view组件中定义的一个方法。主要作用是执行当前组件的渲染工作，如下所示：constregisterInstance=(vm,callVal)=>{//parentvirtualnodeleti=vm.$options._parentVnodeif(isDef(i)&&isDef(i=i.data)&&isDef(i=i.registerRouteInstance)){i(vm,callVal)}}这个mix-in相当于一个定义。具体执行过程中每个组件被实例化时，会根据生命周期回调beforeCreate和destroyed这两个钩子函数。destroyed函数是在路由切换之后，比如实际作用是清除router-view中显示的最后一个组件渲染的内容，并将$router和$route挂载到Vue的原型链上，可以通过this访问。$路由器和这个。使用$路线；将router-link和router-view组件注册到Vue中。总结因为希望篇幅不要太大，不然看起来很难，所以本文就先写到这里，具体涉及到的实例化原理和具体使用在文章后面再说。这里是本文的总结：前端路由的简单介绍，以及实现前端路由的两种模式，URLhash和historyAPI，以及两者的比较；它介绍了Vue是如何使用Vue-Router组件的，实际上在内部，它回调了Vue-Router内部定义的install方法；介绍install方法的一些主要功能：混入beforeCreate和destroyed方法；全局挂载$router和$route；注册路由器链接和路由器视图组件。另外，欢迎来到我的git互相学习和star。
