Web开发中的路由实现原理分视图服务端路由Demo服务端路由管理，常见的开发方式是前端使用ajax根据不同的url发起异步请求获取不同的页面资源，前端获取资源后更新页面。后端路由处理一般都是基于前后端不分离的项目。HTML和数据绑定发生在后端（后端渲染），有利于SEO，因为每次发送请求都需要获取资源，造成服务器资源浪费。前端页面可能因为网速延迟，页面局部视图更新，ajax请求不同保存当前请求状态，无法使用浏览器的前进后退快捷键。服务器路由处理的实现类似如下：不同的url请求路径返回不同的模板app.get('',function(req,res){res.header('Access-Control-Allow-Origin','*');res.sendFile(__dirname+"/"+"index.html");})app.get('/home.html',function(req,res){res.header('Access-Control-Allow-Origin','*');res.sendFile(__dirname+"/"+"pages/home.html");})app.get('*',function(req,res){res.header('Access-Control-Allow-Origin','*');res.sendFile(__dirname+"/"+"pages/404.html");})在单页（SPA）开发前可以通过Hash实现Hash路由Demo-端路由，hash路由如：http:localhost:8100/#/home，url后缀有#（锚点），用于页面定位，即显示元素所在的区域根据页面id在可见区域。#以下内容的改变不会向服务器发送请求。前端路由需要实现：根据不同的hash，监听对应的页面，监听hash值的变化，保存当前URL的请求状态或者参数（比如页面刷新，分享链接，so其他人可以获得相同的内容）来实现浏览器的前进后退功能原理：可以通过window.location.hash属性获取页面的hash值。当url的hash值发生变化时，会触发window对象的hashchange事件。通过监听hashchange事件和操作window.location.hash属性，Route.jsfunctionRoute(params){if(!params){console.log("Pleasechecktheinitializationdata")returnfalse;}this.registeredRoute=[];this.contentId=params.contentId;this.routes=params.routes;this.devStatus=params.devStatus||'无'this.otherRouter=params.otherRouter;this.init();}Route.prototype={constructor:Route,init:function(){window.addEventListener('hashchange',(function(event){varcurrentHash=location.hash.substring(1)||this.otherRouter;varroute=this.routes&&this.routes.find(item=>item['path']===currentHash);if(this.devStatus==='log'){console.log("hash已更改为："，currentHash)}if(route){this.activeRoute();this.render(route)}}).bind(this))varinitEvent=newEvent('hashchange');window.dispatchEvent(initEvent);},//更新视图render(route){if(!$){console.log("请确保项目正确导入jQuery")returnfalse;}var_routeContent=$(`#${this.contentId}`);if(_routeContent){varcurrentView=`
