单页面应用（SPA）需配置Router来解决页面跳转，Vue、React等框架都支持Router配置，尝试使用原生JS实现Router。

Router

单页面应用（SPA）需配置Router来解决页面跳转，Vue、React等框架都支持Router配置，路由常分为hash、history两种模式。hash模式URL尾部带有“#”，history模式不带“#”。history模式需要配合服务器的URL重写，否则将出现404。下面使用原生JS实现Router。

路由原理

  1. Router 注册
    1.1 提供注册的URL
    1.2 提供回调函数
  2. URL 跳转模式
    2.1 push 跳转
    2.2 replace 跳转
  3. Router 监听
    3.1 hashRouter 监听
    3.2 historyRouter 监听
  4. Router 模式
    4.1 hashRouter
    4.2 historyRouter

路由实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Router</title>
</head>
<body>
    <!-- push 跳转模式 -->
    <ul>
        <li onclick="Router.push(baseUrl + \'\')">首页</li>
        <li onclick="Router.push(baseUrl + \'news\')">新闻</li>
        <li onclick="Router.push(baseUrl + \'products\')">产品</li>
    </ul>
    <!-- replace 跳转模式 -->
    <ul>
        <li onclick="Router.replace(baseUrl + \'\')">首页</li>
        <li onclick="Router.replace(baseUrl + \'news\')">新闻</li>
        <li onclick="Router.replace(baseUrl + \'products\')">产品</li>
    </ul>
    <div id="app">

    </div>

<script>
    var app = document.getElementById("app")
    var baseUrl = "/"      // 根目录

    function RouterClass(options) {
        this.routerMap = {} // 用于路由注册
        this.curUrl = ""    // 当前的url
        this.mode = -1
        this.modeWhiteList = {
            "hash":this.eventHashRouter.bind(this),
            "history":this.eventHistoryRouter.bind(this)
        }

        Object.keys(this.modeWhiteList).forEach((key,index)=>{
            if(key === options.mode){
                this.mode = index
                this.modeWhiteList[key]()
            }
        })

        // 默认为hash模式
        if(this.mode === -1){
            console.log("default")
            this.mode = 0;
            this.modeWhiteList[\'hash\']();
        }
    }

    // hash 路由
    RouterClass.prototype.hashRouter = function(){
        this.curUrl = window.location.hash.slice(1) || "/"
        this.routerMap[this.curUrl]()
    }

    // history 路由
    RouterClass.prototype.historyRouter = function(){
        this.curUrl = window.location.pathname
        console.log(this.curUrl)
        this.routerMap[this.curUrl]()
    }


    /* 事件监听 */

    // hash 模式监听
    RouterClass.prototype.eventHashRouter = function(){
        window.addEventListener("hashchange",this.hashRouter.bind(this))
        window.addEventListener("load",this.hashRouter.bind(this))
    }

    // history 模式监听
    RouterClass.prototype.eventHistoryRouter = function(){
        window.addEventListener("popstate",this.historyRouter.bind(this))
    }

    /* 路由注册 */
    RouterClass.prototype.register = function(path,callback){
        this.routerMap[path] = callback || function(){}
    }

    /* 跳转模式 */

    // push 模式跳转
    RouterClass.prototype.push = function(url){
        if(this.mode === Object.keys(this.modeWhiteList).indexOf("history")){
            window.history.pushState({},"",url)
            this.routerMap[url]()
        }else{
            url = "#" + url;
            window.location.href = url;
        }
    }

    // replace 模式跳转
    RouterClass.prototype.replace = function (url) {
        if(this.mode === Object.keys(this.modeWhiteList).indexOf("history")){
            window.history.replaceState({},"",url)
            this.routerMap[url]()
        }else{
            url = "#" + url;
            window.location.replace = url;
        }
    }


    var Router = new RouterClass(
        {mode:"history"}
    );

    Router.register(baseUrl + "",function () {
        app.innerHTML = "index"
    })

    Router.register(baseUrl + "news",function () {
        app.innerHTML = "news"
    })

    Router.register(baseUrl + "products",function () {
        app.innerHTML = "products"
    })
</script>

</body>
</html>

版权声明：本文为chir原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/chir/p/13451795.html