ルートの原理を知らなければなりません
8132 ワード
hashルーティング
hashによるルーティング<html lang="en">
<head>
<style>
#root{
height: 200px;
border: 1px solid red;
}
style>
head>
<body>
<a href="#/a"> /aa>
<a href="#/b"> /ba>
<div id="root">div>
<script>
let container = document.getElementById('root');
window.addEventListener('hashchange',function (e) {
console.log(e);
container.innerHTML = ` ${window.location.hash.slice(1)}`;
})
script>
body>
html>
<html lang="en">
<head>
<style>
#root{
height: 200px;
border: 1px solid red;
}
style>
head>
<body>
<a href="#/a"> /aa>
<a href="#/b"> /ba>
<div id="root">div>
<script>
let container = document.getElementById('root');
window.addEventListener('hashchange',function (e) {
console.log(e);
container.innerHTML = ` ${window.location.hash.slice(1)}`;
})
script>
body>
html>
hashにより経路が切り換えるとhashchangeイベントwindow.location.hash値hashで入手できる.Browserルーティング H5——APIによるルーティング
historyオブジェクト
ブラウザセッション履歴を操作するインタフェースを提供
backは、ブラウザのフォールバックボタンforward次のパスにジャンプし、ブラウザの前進ボタンgoあるパスにジャンプgo(1) === forword()、go(-1) === back()である.lengthは、現在のパスキューに格納パス個数pushStateは、現在のパスキューに新しいパスを追加し、新しいパスにジャンプする.length + 1 history.pushState({name:' '},' ( )','/ ') replaceStateは、現在のパスキューにおいて、現在のパスを新しい置換する.length不変pushState げんり
<html lang="en">
<head>
<style>
#root {
height: 200px;
border: 1px solid red;
}
style>
head>
<body>
<button onclick="push('/a')">/abutton>
<button onclick="push('/b')">/bbutton>
<button onclick="push('/c')">/cbutton>
<div id="root">div>
<script>
let container = document.getElementById('root');
/**
* ( )
*/
window.onpopstate = function (e) {
console.log(e);
container.innerHTML = e.state.to;
}
function push(to) {
/**
* pushState ( )
* 1. 2. ( ) 3.
*/
window.history.pushState({ to }, null, to);
}
script>
body>
html>
window.onpopstateがトリガ)window.onpushstate事件をバインドしていますが、残念ながら、ブラウザは私たちにこの事件を提供してくれませんでした.pushStateの最適化&&onpushstateの実現方法-ルーティング切替ボタンをクリックしながらビュー切替を実現
let oldPushState = window.history.pushState; // pushState ;
window.history.pushState = function(state,title,url){
onpushstate(state,title,url); // onpushstate
oldPushState.call(window.history,state,title,url); // pushState
}
window.onpushstate = function(state,title,url){
container.innerHTML = state.to || url;
}