关键词：
后端路由：
早期传统MVC网站路由都是服务端主导，前端通过不同URL请求后端，后端框架有专门的路由模块用来匹配URL地址，然后根据不同地址和参数调用相关处理程序并返回html页面给前端。
前端路由：
后来前后端分离，react/vue等框架流行，路由由前端主导。还是由前端改变url,但要做到不发生真实的网页跳转，即不向服务器请求网页。然后改由前端监听路由变化，并截获路由进行匹配以显示不同的前端组件，组件再通过ajax获取视图所需json数据。
前端路由分两种：hash模式 和 history模式。
hash模式
(1) 通过a标签、window.location改变hash。
hash是URL中#及后面的那部分，改变hash会记入历史栈，不会发起页面请求。
(2) 通过hashchange事件监听hash变化，触发页面改变。
a标签跳转、window.location跳转，浏览器前进后退引起的hash变化都可以触发chashchange 事件。
<!--极简代码-->
<a href='#/home'>home</a>
<a href='#/list'>list</a>
<div id='wrap'></div>
<script>
wrap = document.querySelector('#wrap')
//监听hash变化
window.addEventListenerChashchange1,render)
//根据hash渲染对应组件
function render ()
switch (location.hash)
case '#/home':
wrap.innerHTML = "Home"
return
case '#/list':
wrap.innerHTML = "List1"
return
default:
return
</script>
hash模式优缺点：
1,兼容性好，能兼容到IE8。
2,url中带号不太美观。
3,hash用来做路由则限制了原本的锚点功能。
history模式
(1)通过history.pushState改变URL。
history. pushState(state,title,[url])向当前浏览器的历史栈中添加一个url地址(相对和绝对路径均可，但origin必须是一样的)和state状态。浏览器地址栏显示该URL地址，但页面不会发生请求。
state：创建每个路由自定义的数据对象。触发popstate事件时可从e.state里获取。
title：标题，基本无用，一般传null。
url：添加的路由地址。(最重要，虽然是可选参数)。
(2)手动触发和onpopstate监听历史栈触发页面改变。
window.onpopstate监听历史栈变化可通过popstate事件监听由前进后退引起的url变化，进而触发视图变化。
但popstate事件 不支持push State和replaceState引起的url变化，需要手动触发。
极简代码
<a href='/home'>home</a>
<a href='/list'>list</a>
<div id='wrap'></div>
<script>
wrap = document.querySelector('#wrap')
//对pushState引起的URL变化，手动触发渲染。
var link = document.querySelectorAll('a[href]')
link.forEach(el => el.addEventListener('click',
function(e) i
//阻止事件默认行为(没有#号会发生页面请求)
e.preventDefault() j
//调用pushState更新历史栈和地址栏url
history.pushState(null, null, el.getAttributefhref))
//手动触发渲染
render() ：
))
//监听前进后退的URL变化，触发渲染
window.addEventListener('popstate',e =>
render()
));
//根据路径path渲染对应组件
function render ()
switch (location.pathname)
case '/home’:
wrap.innerHTML = 'Home'
return
case '/list':
wrap.innerHTML = 'List'
return
default:
return
</script>
history模式优缺点：
1, url格式符合正常认知，没有#号较美观。
2, pushState是H5新增，只兼容到IE10。需加入兼容判断 !!(window.history && history.pushState)。
3, 404问 题 。 当手动刷新强制请求页面时 ，hash模式#号后不参与，即还是请求的主页期，不会产生404。而history模式没有#号会请求整路径，服务端没有匹配页面会返回404, 解决方式是后端配置将任意页面重定向到index.html。
浅谈前端路由原理hash和history(代码片段)
浅谈前端路由原理hash和history🎹序言🎸一、前端路由原理1、SPA2、什么时候需要路由🎷二、Hash模式1、定义2、网页url组成部分（1）了解几个url的属性（2）演示3、hash的特点🎺三、History模式1、定义... 查看详情
前端路由简介以及vue-router实现原理(代码片段)
后端路由简介路由这个概念最先是后端出现的。在以前用模板引擎开发页面时，经常会看到这样http://www.xxx.com/login大致流程可以看成这样：浏览器发出请求服务器监听到80端口（或443）有请求过来，并解析url路径根据服务器的路... 查看详情
前端路由简介以及vue-router实现原理(代码片段)
后端路由简介路由这个概念最先是后端出现的。在以前用模板引擎开发页面时，经常会看到这样http://www.xxx.com/login大致流程可以看成这样：浏览器发出请求服务器监听到80端口（或443）有请求过来，并解析url路径根据服务器的路... 查看详情
微前端实现原理研究总结(代码片段)
微前端实现原理研究总结前言微前端实现方案子应用生命周期改写子应用子应用打包主应用中注册子应用主应用和子应用的路由模式主应用路由拦截主应用获取子应用并执行生命周期函数主应用加载并解析子应用获取html文件内... 查看详情
微前端实现原理研究总结(代码片段)
微前端实现原理研究总结前言微前端实现方案子应用生命周期改写子应用子应用打包主应用中注册子应用主应用和子应用的路由模式主应用路由拦截主应用获取子应用并执行生命周期函数主应用加载并解析子应用获取html文件内... 查看详情
前端路由原理(代码片段)
...端路由：早期传统MVC网站路由都是服务端主导，前端通过不同URL请求后端，后端框架有专门的路由模块用来匹配URL地址，然后根据不同地址和参数调用相关处理程序并返回html页面给前端。前端路由：后来前后... 查看详情
前端笔记整理（vue）(代码片段)
Vue学习总结MVVM原理了解响应原理v-model双向绑定原理生命周期nextTick在哪里使用？原理是？vue.use是干什么的？原理是什么？Vue路由vue路由模式路由导航方式Vue-router有几种钩子函数？组件通信axios拦截器配置webpac... 查看详情
前端路由原理及vue-router介绍(代码片段)
前端路由原理本质就是监听URL的变化，然后匹配路由规则，显示相应的页面，并且无须刷新。目前单页面使用的路由就只有两种实现方式hashhistorywww.test.com/##/ 就是HashURL，当 ## 后面的哈希值发生变化时，不会向服务器... 查看详情
浅谈前端路由原理hash和history(代码片段)
浅谈前端路由原理hash和history🎹序言🎸一、前端路由原理1、SPA2、什么时候需要路由🎷二、Hash模式1、定义2、网页url组成部分（1）了解几个url的属性（2）演示3、hash的特点🎺三、History模式1、定义... 查看详情
vue专题-路由系统(代码片段)
...为了更好的结合，本文详细介绍了前后端分离架构之后，前端如果实现路由控制，即Vue路由系统。Vue路由系统VueRouter实现原理VueRouter的实现原理是根据监控锚点值的改变，从而不断修改组件内容来实现的，我们来试试不使用VueRou... 查看详情
spa路由实现的基本原理(代码片段)
1.SPA路由实现的基本原理前端单页应用实现路由的策略有两种，分别是基于hash和基于HistoryAPI基于hash通过将一个URLpath用#Hash符号拆分。—浏览器视作其为虚拟的片段。最早前端路由的实现就是基于location.hash来实现的，有这样几个... 查看详情
vue-router(代码片段)
...实的资源之间就有一种对应的关系，就是路由。路由分为前端路由和后端路由1.1后端路由后端路由是根据不同的用户URL请求，返回不同的内容，本质就是URL请求地址与服务器资源之间的对应关系。由服务器端进行实现，并完成资... 查看详情
react路由(代码片段)
React路由：一、前端路由的工作原理：其实是利用前端中的BOM对象中的history这个属性来进行的实现。二、实现前端路由的两种方法：方法一：直接使用H5推出的history身上API。但是有些旧的浏览器可能不支持。这里... 查看详情
react路由(代码片段)
React路由：一、前端路由的工作原理：其实是利用前端中的BOM对象中的history这个属性来进行的实现。二、实现前端路由的两种方法：方法一：直接使用H5推出的history身上API。但是有些旧的浏览器可能不支持。这里... 查看详情
前端路由模式hash和history(代码片段)
hash模式hash模式的原理是依据window对象的onhashchange事件进行监听，它的特点是：虽然hash路径出现在URL中，但是不会出现在HTTP请求中，对后端完全没有影响，因此改变hash值不会重新加载页面。window.onhashchange=function(e)console.log(e);打... 查看详情
前端hash路由基本原理,及代码的基本实现
...，随着ajax的出现，页面实现非reload就能刷新数据，也给前端路由的出现奠定了基础。我们可以通过记录url来记录ajax的变化，从而实现前端路由。（可以根据不同的url来展示不同的页面，很好的优化了页面的交互体验。）目前有... 查看详情
前端路由机制(代码片段)
前端路由：在应用使用期间不会重新加载，提高用户体验，减低网速要求，界面展开快。前后端分离方便开发目前前端路由有两种实现方法：利用url的hash，当浏览器url的锚点部分发生改变，不会刷新页面的原理利用h5中的history... 查看详情
vuerouter源码深度解析(代码片段)
...家更好的准备面试。路由原理在解析源码前，先来了解下前端路由的实现原理。前端路由实现起来其实很简单，本质就是监听U 查看详情