pushState 함수는 History의 state 큐에 새로운 url 정보를 추가하고 현재 url도 기존에 추가된 상태로 업데이트합니다. 단, 현재 Origin값이 유지되는 형식에 한해서 추가 되어야 합니다.
const state = { 'page_id': 1, 'user_id': 5 } // history.state에 등록된 값
const title = '' // 상태에 대한 제목..? 대부분 브라우저에서 무시하는 값
const url = 'hello-world.html' // 업데이트될 url 정보
history.pushState(state, title, url)
history.replaceState(null, '', 'bar2.html'); // pop하고 bar2.html을 url 정보로 대신합니다.
<!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>
<div id="container"></div>
<a class="LinkItem" href="/product-list">product list</a>
<a class="LinkItem" href="/article-list">article list</a>
<script>
const route = () => {
const { pathname } = window.location;
const $container = document.querySelector('#container');
console.log(pathname);
if(pathname === '/') {
$container.innerHTML = `<h1>Home</h1>`
}else if(pathname === '/product-list') {
$container.innerHTML = `<h1>상품 목록</h1>`
}else if(pathname === '/article-list') {
$container.innerHTML = `<h1>게시글 목록</h1>`
}
}
window.addEventListener('click', e => {
if(e.target.matches('.LinkItem')) {
e.preventDefault();
const { href } = e.target;
window.history.pushState(null, null, href);
route();
}
})
route()
</script>
</body>
</html>