골든 스톤 프로젝트의 첫 번째 챌린지 - 100,000 상금 풀 나누기, 이번이 세 번째 글 입니다. 이벤트 세부 정보를 보려면 클릭하세요.
프론트엔드에는 처음에는 라우팅 개념이 없었습니다. 초기에는 프론트엔드가 그림 자르기를 담당했을 때 html 파일 경로가 페이지에 해당하고 라우팅 개념이 없었기 때문입니다. 페이지 및 경로. 그리고 프론트엔드의 발달로 프론트엔드는 더 이상 단순한 피규어 컷 소년의 역할이 아니며, 라우팅 개념도 도입됩니다.
프런트 엔드 라우팅이란 무엇입니까?
프론트 엔드 라우팅에 관해서는 먼저 밤을 가져 봅시다.
여기에서 우리는 Nuggets의 홈페이지에 있습니다. 경로는 juejin.cn/recommended 입니다.
그런 다음 끓는점을 클릭합니다.
경로는 다음과 같습니다. juejin.cn/pins
여기서 우리가 볼 수 있는 것은 경로의 마지막 부분과 마지막 부분만 변경되었으며 이전 경로는 변경되지 않았다는 것입니다.
이것은 무엇을 의미 하는가? 이것은 실제로 단일 페이지 페이지입니다. 페이지가 하나뿐입니다. 클릭하면 다른 페이지 효과를 렌더링하기 위해 경로를 변경하는 것뿐입니다. 그러나 페이지가 새로 고쳐지지 않는다는 점을 언급할 가치가 있습니다. 여기에 프로세스 양이 있습니다.
즉, 홈페이지에서 끓는점을 클릭하기 전후에 페이지 새로고침 버튼이 새로고침되지 않는 것을 볼 수 있습니다.
요약: 프론트엔드 라우팅은 url과 페이지 ui 간의 매핑 관계, 단방향 매핑을 설명하는 것입니다.
라우팅을 구현하려면 어떻게 해야 합니까?
1. 페이지를 새로 고치지 않고 URL을 변경하는 방법
2. URL이 변경되었음을 감지하는 방법
프런트 엔드 라우팅을 구현하는 방법
해시시
해시는 해시라고도 하며, 브라우저 url의 해시 값 부분이 변경되면 페이지가 새로고침되지 않는다는 점에 유의해야 합니다.
여기에서 두 개의 태그를 작성했습니다. 경로는 각각 /home및 /about이 두 태그의 하이퍼링크를 클릭하면 페이지가 다음 페이지, 즉 다중 페이지 애플리케이션으로 이동합니다.
<!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>
复制代码그렇다면 해시 라우팅을 구현하는 방법은 무엇입니까?
首先，我们只要把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'))里，添加改变路径。
그런 다음 함수를 호출 PoPState하여 렌더링할 함수 부분을 결정합니다.
<!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>
复制代码효과는 다음과 같습니다.
일반적으로 라우팅 효과는 페이지를 새로 고치지 않고 페이지 url을 변경한 후 경로를 판단하여 페이지를 렌더링할 다른 구성 요소를 선택하는 방식으로 이루어집니다.