Golden Stone Project の最初のチャレンジにサインアップしました - 賞金プール 100,000 を分割します。これは私の 3 回目の記事です。クリックしてイベントの詳細を表示します
フロントエンドには最初はルーティングの概念がありませんでした。なぜなら、フロントエンドが画像の切り取りを担当していた初期の頃、html ファイルのパスがページに対応し、ルーティングの概念はなく、概念のみがあったからです。ページとパスの。そして、フロントエンドの発展に伴い、フロントエンドは単なるフィギュアカッティングボーイの役割ではなくなり、ルーティングの概念も導入されました。
フロントエンド ルーティングとは
フロントエンド ルーティングとは何かということになると、まず栗を取りましょう。
ここでは、Nuggets のホームページにアクセスしています。パスは次のとおりです: juejin.cn/recommended
次に、沸点をクリックします。
パスは次のようになります: juejin.cn/pins
ここでわかるのは、パスの最後と最後の部分だけが変更され、以前のパスは変更されていないことです。
これは何を意味するのでしょうか？これは実際には 1 ページのページです. 1 ページしかありません. クリックしてジャンプするには、パスを変更してさまざまなページ効果をレンダリングするだけです. ただし, ページが更新されないことに注意してください. ここにはプロセス量があります.
つまり、ホームページの沸点をクリックする前後で、ページ更新ボタンが更新されていないことがわかります。
概要:フロントエンド ルーティングは、url とページ ui の間のマッピング関係、一方向マッピングを記述することです。
ルーティングを実装するにはどうすればよいですか?
1. ページを更新せずに URL を変更する方法
2. URL が変更されたことを検出する方法
フロントエンド ルーティングの実装方法
ハッシュ
ハッシュはハッシュとも呼ばれ、ブラウザのURLのハッシュ値部分が変更されるとページが更新されなくなるので注意が必要です。
ここでは、2 つの a タグを記述しました。パスはそれぞれ/homeと/aboutです。これら 2 つの a タグのハイパーリンクをクリックすると、ページが次のページ、つまりマルチページ アプリケーションにジャンプします。
<!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 を変更し、パスを判断してページをレンダリングするさまざまなコンポーネントを選択することによって実現されます。