Me inscribí en el primer desafío del Proyecto Golden Stone - Divide el pozo de premios de 100,000, este es mi tercer artículo, haz clic para ver los detalles del evento
El front-end no tenía el concepto de enrutamiento al principio, porque al principio, cuando el front-end era responsable de cortar imágenes, una ruta de archivo html corresponde a una página, no existe el concepto de enrutamiento, solo el concepto de página y ruta. Y con el desarrollo del front-end, el front-end ya no es solo el papel de un simple chico que corta figuras, y también se introduce el concepto de enrutamiento.
¿Qué es el enrutamiento de front-end?
Cuando se trata de lo que es el enrutamiento de front-end, primero tomemos una castaña.
Aquí, estamos en la página de inicio de Nuggets, la ruta es: juejin.cn/recommended
Luego hacemos clic en el punto de ebullición:
El camino se convierte en: juejin.cn/pins
Lo que podemos ver aquí es que solo ha cambiado la última y última parte del camino, y el camino anterior no ha cambiado.
¿Qué significa esto? Esta es en realidad una página de una sola página. Solo hay una página. Hacer clic para saltar es simplemente cambiar la ruta para generar diferentes efectos de página. Sin embargo, vale la pena mencionar que la página no se actualiza. Hay una cantidad de proceso aquí.
Es decir, antes y después de hacer clic en el punto de ebullición de la página de inicio, puede ver que el botón de actualización de la página no se actualiza.
Resumen: el enrutamiento front-end es para describir la relación de mapeo entre la URL y la interfaz de usuario de la página, mapeo unidireccional.
¿Qué se debe hacer para implementar el enrutamiento?
1. Cómo cambiar la URL sin que la página se actualice
2. Cómo detectar que la url ha cambiado
Cómo implementar el enrutamiento front-end
picadillo
Hash también se llama hash Cabe señalar que si se cambia la parte del valor hash de la URL del navegador, la página no se actualizará.
Aquí, hemos escrito dos etiquetas a, las rutas son /homey respectivamente /about, luego haga clic en los hipervínculos de estas dos etiquetas a, nuestra página saltará a la página siguiente, es decir, una aplicación de varias páginas.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<ul>
<li>
<a href="/home">首页</a>
</li>
<li>
<a href="/about">关于</a>
</li>
</ul>
<!-- 渲染对应的UI -->
<div id="routerView"></div>
</body>
</html>
复制代码Entonces, ¿cómo implementar el enrutamiento hash?
首先，我们只要把a标签的路径改为#/home和#/about，hash路径都要加上一个#前缀，浏览器会自动识别这是hash路径，从而达到路径发生改变，但页面并没有进行刷新跳转，仍旧处于原本这个页面。
<body>
<ul>
<li>
<a href="#/home">首页</a>
</li>
<li>
<a href="#/about">关于</a>
</li>
</ul>
</body>
复制代码可浏览器识别了路径的hash值发生了改变，页面也并没有什么其它的东西渲染出来啊？这就是我们需要解决的第二个问题了，怎样检测监听页面url的改变，我们只需要检测到页面url的改变，且获取改变的那一段页面url，来判断那一段url应该在页面上渲染什么。
那么，怎么检测页面url发生改变呢？
window.addEventListener('hashchange',onHashChange)
复制代码JS自带一个有关于window事件的监听，第一个参数为hashchange，即监听页面url的hash值改变，第二个参数为一个函数，这里我们为了好看一点，这里放上函数名onHashChange。
只要页面的url里hash值部分发生改变，那么就会调用onHashChange函数。
再通过location.hash来获取页面改变的hash值部分在函数里面来决定应该渲染哪一部分页面。
完整代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<ul>
<li>
<a href="#/home">首页</a>
</li>
<li>
<a href="#/about">关于</a>
</li>
</ul>
<!-- 渲染对应的UI -->
<div id="routerView"></div>
<script>
let routerView = document.getElementById('routerView')
window.addEventListener('hashchange',onHashChange)
//控制渲染对应的ui
function onHashChange(){
switch(location.hash){
case '#/home':routerView.innerHTML='首页'
braek;
case '#/about':routerView.innerHTML='关于'
break;
default:return
}
}
</script>
</body>
</html>
复制代码效果如图：
hash实现路由非常简便，但是有一个小弊端，就是路径不美观，每一段路径都会加一个#号，而路径我们一般都是/去分割，多加一个#不太美观，所以我们通常用history方法实现路由用的更多。
history
history是HTML5提供的一个对象方法。
而我们要实现history路由之前，我们应该知道这么三种方法：
pushState//增加url，且不会引起页面变化replaceState//修改url 并且不会引起页面刷新的popState//监听url变化
在用history方法之前，我们需要先监听a标签的点击事件，然后阻止a标签自带的跳转，这里我们使用preventDefault()方法。
用a.getAttribute('href')获取a标签里的href路径，用作于history的history.pushState(null,'',a.getAttribute('href'))里，添加改变路径。
Luego llame PoPStatea la función para decidir qué parte de la función representar
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<ul>
<li>
<a href="/home">首页</a>
</li>
<li>
<a href="/about">关于</a>
</li>
</ul>
<!-- 渲染对应的UI -->
<div id="routerView"></div>
<script>
let routerView = document.getElementById('routerView')
window.addEventListener('DOMContentLoaded',onLoad) //页面第一次加载就进行默认选中渲染内容
// window.addEventListener('popstate',PoPState) //浏览器的前进后退能匹配
function onLoad(){
PoPState()
let links = document.querySelectorAll('li a[href]')
links.forEach(a=>{
a.addEventListener('click',(e)=>{
e.preventDefault(); //阻止a标签的href标签
history.pushState(null,'',a.getAttribute('href'))
PoPState()
})
})
}
onLoad()
function PoPState(){
switch(location.pathname){
case '/home':
routerView.innerHTML = '<h2>home page</h2>'
return
case '/about':
routerView.innerHTML = '<h2>about page</h2>'
return
default:
return
}
}
</script>
</body>
</html>
复制代码El efecto es el siguiente:
En general, el efecto de enrutamiento se logra cambiando la URL de la página sin actualizar la página y luego juzgando la ruta para seleccionar diferentes componentes para representar la página.