路由设计模式 #

<nav class="nav-box">
    <a href="#/">首页</a>
    <a href="#/product">产品中心</a>
    <a href="#/personal">个人中心</a>
</nav>
<div class="view-box"></div>

<!-- IMPORT JS -->
<script>
    // 路由容器
    const viewBox = document.querySelector('.view-box');
    // 路由表
    const routes = [{
        path: '/',
        component: '首页内容'
    }, {
        path: '/product',
        component: '产品中心内容'
    }, {
        path: '/personal',
        component: '个人中心内容'
    }];

    // 页面一加载，我们设置默认的hash值
    location.hash = '/';

    // 路由匹配的方法
    const routerMatch = function routerMatch() {
        let hash = location.hash.substring(1),
            text = "";
        routes.forEach(route => {
            if (route.path === hash) {
                text = route.component;
            }
        });
        viewBox.innerHTML = text;
    };
    routerMatch();
    window.addEventListener('hashchange', routerMatch);
</script>

<nav class="nav-box">
    <a href="/">首页</a>
    <a href="/product">产品中心</a>
    <a href="/personal">个人中心</a>
</nav>
<div class="view-box"></div>

<!-- IMPORT JS -->
<script>
    const viewBox = document.querySelector('.view-box'),
        navBox = document.querySelector('.nav-box');
    const routes = [{
        path: '/',
        component: '首页内容'
    }, {
        path: '/product',
        component: '产品中心内容'
    }, {
        path: '/personal',
        component: '个人中心内容'
    }];

    // 路由匹配
    const routerMatch = function routerMatch() {
        let path = location.pathname,
            text = "";
        routes.forEach(route => {
            if (route.path === path) {
                text = route.component;
            }
        });
        viewBox.innerHTML = text;
    };

    history.pushState({}, "", "/");
    routerMatch();

    // 控制路由切换
    navBox.addEventListener('click', function (ev) {
        let target = ev.target;
        if (target.tagName === 'A') {
            // 阻止默认行为
            ev.preventDefault();
            // 实现路由的跳转
            history.pushState({}, "", target.href);
            routerMatch();
        }
    });

    /* 
     popstate事件触发时机：
     1）点击浏览器的前进、后退按钮
     2）调用history.go/forward/back等方法
     注意：history.pushState/replaceState不会触发此事件
     */
    window.addEventListener('popstate', routerMatch);
</script>