前端路由原理

Posted 2022-11-25 前端纸飞机

后端路由：

早期传统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。