浅谈Router原理 | 小浩之随笔

Router

发布日期: 2020-06-30

阅读次数:

vue-router是什么

通过改变 URL，在不重新请求页面的情况下，更新页面视图。

vue-router两种路由模式

history（不带#号）,利用URL中的路径（/home）,使用pushState和popstate事件构建路由
Hash（带#号），利用 URL 中的hash(“#”),使用window.location.hash获取和hashchange事件构建路由。

设置路由模式

const router=new VueRouter({
    mode:'history',
    routes:[...]
})

mode 区别：

1.mode:“hash” 多了 “#”
http://localhost:8080/#/home
2.mode:“history”
http://localhost:8080/home

HashHistory

HashHistory 拥有两个方法，一个是 push，一个是 replace
两个方法：HashHistory.push() 和 HashHistory.replace()
HashHistory.push() 将新路由添加到浏览器访问历史的栈顶
HashHistory.replace() replace()方法与push()方法不同之处在于，它并不是将新路由添加到浏览器访问历史的栈顶，而是替换掉当前的路由

HTML5History

两个方法：pushState()、replaceState()
在HTML5History的构造函数中监听popState
popstate事件会在点击后退、前进按钮(或调用history.back()、history.forward()(调用该方法的效果等价于点击前进按钮或调用 history.go(1))、history.go()方法)时触发。前提是不能真的发生了页面跳转,而是在由history.pushState()或者history.replaceState()形成的历史节点中前进后退

注意:用history.pushState()或者history.replaceState()不会触发popstate事件。

实现代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>路由原理</title>
</head>
<body>
<button type="button" onclick="history.go(-1)">返回</button><br/>
push模式
    <ul>
        <li onclick="Router.push(baseUrl)">首页</li>
        <li onclick="Router.push(baseUrl+'news')">新闻</li>
        <li onclick="Router.push(baseUrl+'product')">产品</li>
    </ul>
replace模式
<ul>
    <li onclick="Router.replace(baseUrl)">首页</li>
    <li onclick="Router.replace(baseUrl+'news')">新闻</li>
    <li onclick="Router.replace(baseUrl+'product')">产品</li>
</ul>
<div id="app"></div>
<script>
    var app=document.getElementById("app"),baseUrl="/router/";
    function RouterClass(opts){
        this.routes={};
        this.curUrl="";
        this.mode="";
        if(opts){
            this.mode=opts.mode;
            if(this.mode==='history'){
                this.eventHistoryRouter();
            }else{
                this.eventHashRouter();
            }
        }else {
            this.eventHashRouter();
        }
    }
    RouterClass.prototype.route=function(path,callback){
        this.routes[path]=callback || function(){}
    };
    //hash模式
    RouterClass.prototype.hashRouter=function(){
          this.curUrl=window.location.hash.slice(1) || '/';
		  if(this.curUrl != '/'){
			  this.routes[this.curUrl]();
		  }
            
    };
    //监听hash模式路由
    RouterClass.prototype.eventHashRouter=function(){
        window.addEventListener("load",this.hashRouter.bind(this));
        window.addEventListener("hashchange",this.hashRouter.bind(this));
    };
    //history模式
    RouterClass.prototype.historyRouter=function(){
        this.curUrl=window.location.pathname;
        if(this.curUrl != '/'){
        	this.routes[this.curUrl]();
        }
    };
    //监听history模式路由
    RouterClass.prototype.eventHistoryRouter=function(){
        window.addEventListener("load",this.historyRouter.bind(this));
        window.addEventListener("popstate",this.historyRouter.bind(this));
    };

    //push模式跳转页面
    RouterClass.prototype.push=function(url){
        if(this.mode==='history'){
            window.history.pushState({},null,url);
            this.routes[url]();
        }else {
            url="#"+url;
            window.location.href = url;
        }
    };
    //replace模式跳转页面
    RouterClass.prototype.replace=function(url){
        if(this.mode==='history'){
            window.history.replaceState({},null,url);
            this.routes[url]();
        }else {
            url = "#" + url;
            window.location.replace(url);
        }
    };


    var Router=new RouterClass({
        mode:"hash" //hash:带#号,history:不带#号
    });
    Router.route(baseUrl,function(){
        app.innerHTML="首页"
    })
    Router.route(baseUrl+'news',function(){
        app.innerHTML="新闻页面"
    })
    Router.route(baseUrl+'product',function(){
        app.innerHTML="产品页面"
    })
</script>
</body>
</html>

赏