hash
案例介绍
<body>
<div id="app">
<a href="#/home">首页</a>
<a href="#/about">关于</a>
<!-- 渲染到该div下面 -->
<div id="router-view">
</div>
</div>
<script>
//获取view
const routerView = document.getElementById("router-view");
//每当hash值发生变化 就会触发hashchange是事件
window.onhashchange = function(){
//获取hash值
let hash = location.hash;
//根据hash值的不同 给用户显示不同的内容
if(hash == "#/home"){
routerView.innerHTML = "<h1>欢迎来到首页</h1>"
}else if(hash == "#/about"){
routerView.innerHTML = "<h1>这是关于我们首页</h1>"
}else{
routerView.innerHTML = "<h1>404 孩子找不到</h1>"
}
}
</script>
history
案例介绍
<body>
<div>
<button onclick="linkTo(1)">首页</button>
<button onclick="linkTo(2)">关于我们</button>
<!-- 根据url的不同 在此div展示不同的内容 -->
<div id="router-view"></div>
</div>
<script>
const routerView = document.getElementById('router-view');
//定义一个跳转事件
function linkTo(id) {
console.log(id);
if (id == 1) {
history.pushState({ a: 1 }, 'name1', '/home')
routerView.innerHTML = "<h1>这是首页</h1>"
} else if (id == 2) {
history.pushState({ a: 1 }, 'name2', '/about')
routerView.innerHTML = "<h1>这是关于我们</h1>"
}
}
</script>
</body>