<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hash路由的原理</title>
</head>
<body>
<h1>Hash路由的原理</h1>
<div id="app"></div>
<script>
/**
* hash路由
* 核心事件：hashchange
* history路由
* window.history
* state
*/
const routes = [{
path: '/home',
component: `<div>Home</div>`
}, {
path: '/mine',
component: `<div>Mine</div>`
}, {
path: '/reg',
component: `<div>注册</div>`
}, {
path: '/login',
component: `<div>登录</div>`
}, {
path: '/notfound',
component: `<div>404</div>`
}]
jump();
window.onhashchange = function () {
console.log(666);
// 获取当前hash值
jump();
}
function jump() {
const hash = window.location.hash.slice(1); // #/home
let currentRouter = routes.filter(item => item.path === hash)[0]
if (!currentRouter) {
如果hash地址在路由表没有哦就直接跳到/notfound页面
currentRouter = routes.filter(item => item.path === '/notfound')[0]
location.hash = currentRouter.path;
}
app.innerHTML = currentRouter.component
}
</script>
</body>
</html>
VUE当中hash路由的原理
最新推荐文章于 2024-09-04 17:28:36 发布
扫一扫
2289
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
