Hash路由

作者: 废弃的种子 | 来源:发表于2020-03-13 15:23 被阅读0次

获取导航栏url的路由导航参数(Hash和非Hash)
Vue的两种路由模式
Vue-router中hash模式和history模式
微信JSSDK网页
Vue 路由router
前端路由
2021-11-28
前端路由实现
React路由
Vue的两种路由模式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--路由：在不发送HTTP请求的情况下对页面进行刷新-->
<!--hash:页面中hash的变化不会发送http请求，我们可以根据hash值的变化来实现路由功能-->
<ul class="list">
    <li><a href="#/red">红</a></li>
    <li><a href="#/green">绿</a></li>
    <li><a href="#/blue">蓝</a></li>
</ul>
<script>
    class Route{
        constructor(){
            this.route={};
            this.currentUrl='';
            //在对象创建的时候就监听hash值的变化，防止hash变化但是没有捕捉到
            window.addEventListener('hashchange',this.refresh.bind(this),false);
        }
        router(path,callback){
            this.route[path]=callback || function () {};
        }
        //定义refresh方法，监测页面变化，对页面进行刷新
        //1、保存当前页面的hash值
        //2、根据hash值，去执行route对象保存的路由信息
        refresh(){
            let hash=location.hash.slice(1);
            console.log(hash);
            //根据hash值去执行route中的路由信息
            this.route[hash]();
        }
    }

    let list=document.querySelector(".list")
    let Router=new Route();


    Router.router('/red',function () {
        list.style.background='red';
    });
    Router.router('/green',function () {
        list.style.background='green';
    });
    Router.router('/blue',function () {
        list.style.background='blue';
    });


</script>


</body>

</html>