前端路由的简单实现-工具盒子

因为 AJAX 的出现诞生了单页应用这种网页类型，单页应用简单的说就是前端通过 AJAX 加载和动态改变 DOM 内容来切换页面，网页本身并不会刷新和跳转。像 YouTube 、Google Play 、网易云音乐等都属于单页应用。虽然页面不会跳转但观察浏览器地址栏就会发现地址是会改变的，手动刷新网页也不会转到首页，这就是前端实现的路由。

目前常见的实现路由的方式有两种，一种是通过 hash 来实现，另一种是通过 HTML5 中加入的 history API 来实现。

hash

这里主要是实现改变 URL，AJAX 的部分就不写了，下面是一个简单的 HTML：

HTML

<div>无内容</div>
<ul>
    <li><a href="#red">红色</a></li>
    <li><a href="#green">绿色</a></li>
    <li><a href="#blue">蓝色</a></li>
</ul>

只需要在链接 URL 前面加一个 # 链接就不会跳转。这里要实现的功能就是点击链接后 URL 改变，div 中的内容也改变，刷新网页 div 中的内容也不会消失，下面是 JS 代码：

JavaScript

//  封装一个函数，根据传入的 hash 改变 div 的内容
let setPage = hash => {
    //  如果 hash 没有内容
    if (hash == '' || hash == null) {
        hash = 'white';
    }else {
        hash = hash.replace('#', '');  //  去除 #
    }
    //  div 的内容
    let content = {
        red: "红色",
        green: "绿色",
        blue: "蓝色",
        white: "无内容"
    };

    //  根据传入的 hash 改变 div 的内容
    document.querySelector('div').innerHTML = content[hash];
    //  根据传入的 hash 改变 div 的背景颜色
    document.querySelector('div').style.background = hash;
    //  根据传入的 hash 设置页面标题
    document.title = content[hash];
};

//  给 window 添加一个 hashchange 事件，当 hash 改变就会触发 hashchange 事件
window.addEventListener('hashchange', (event) => {
    setPage(location.hash);  //  根据获取的 hash 改变 div 的内容
});

//  执行 setPage 函数，刷新页面 div 的效果也不会消失
setPage(location.hash);

因为注释比较多看上去可能比较长，实际很简单，下面是详细说明：

location.hash 属性

如果 URL 中包含 # 通过 location.hash 可获取 # 和后面的内容。location.hash 是一个可读可写的属性，直接修改 location.hash 的内容 URL 也会改变。

hashchange 事件

当窗口 URL # 后面的内容改变时就会触发 hashchange 事件，hashchange 还包含两个属性：

event.newURL

当前页面的完整 URL。

event.oldURL

前一个 URL，也就是更改之前的 URL。

setPage 函数封装了改变 div 的内容和背景颜色、改变页面标题，当 hashchange 监听到 URL 变化时就会调用 setPage 函数，刷新或打开页面也会调用 setPage 函数。使用 hash 路由最合兴的就是 location.hash 属性和 hashchange 方法，hashchange 方法需要绑定到 window 。

下面是实现效果：

hash路由效果演示

在历史记录中也能看到：

hash路由历史记录

注意！如果链接 URL # 后面的内容和页面元素的 id 相同在点击链接时会跳转到相同 id 元素的区域。

history

history 是 HTML5 中加入的 API，主要功能就是操作浏览器的会话历史记录，下面是 HTML：

HTML

<div>无内容</div>
<ul>
    <li><a href="red">红色</a></li>
    <li><a href="green">绿色</a></li>
    <li><a href="blue">蓝色</a></li>
</ul>

这里要实现的功能还是点击链接改变 URL 和 div 的效果，同时添加历史记录，下面是 JS：

JavaScript

let link = document.querySelectorAll("li a");  //  获取链接

//  封装一个函数，根据传入的 data 改变 div 的内容
let setPage = data => {
    //  div 的内容
    let content = {
        red: "红色",
        green: "绿色",
        blue: "蓝色",
        white: "无内容"
    };
    
    //  根据传入的 data 改变 div 的内容
    document.querySelector('div').innerHTML = content[data];
    //  根据传入的 data 改变 div 的背景颜色
    document.querySelector('div').style.background = data;
    //  根据传入的 data 设置页面标题
    document.title = content[data];
};

for (let i = 0; i < link.length; i++) {
    //  链接点击
    link[i].addEventListener("click", event => {
        event.preventDefault();  //  阻止浏览器跳转
        let el = event.target;  //  获取当前点击的链接
        //  修改 URL 和历史记录
        history.pushState(el.getAttribute('href'), '', el.href);
        //  根据点击链接的 href 来设置 div 的效果
        setPage(el.getAttribute('href'));
    });
}

//  给 window 添加 popstate 事件，点击浏览器的前进和后退就会触发 popstate
window.addEventListener('popstate', event => {
    let data = event.state;  //  history.pushState 传入的数据
    //  如果没有数据
    if (data == undefined) {
        data = 'white';
    }
    //  根据 history.pushState 传入的数据来设置 div 的效果
    setPage(data);
});

这里也是因为注释比较多，实际很简单，下面是详细说明：

history.pushState(data, title, url) 方法

在不跳转的情况下改变 URL，同时添加到历史记录，下面是参数说明：

| 参数 | 类型 | 说明 | |-------|--------|---------------------------| | data | state | 一个状态对象，可以通过 popstate 事件读取 | | title | string | 标题，对大多数浏览器都无效。 | | url | string | 要添加到历史记录的 URL |

history.replaceState(data, title, url) 方法

在不跳转的情况下改变 URL，同时替换历史记录，和 history.pushState 不一样的地方就是 history.replaceState 只会替换历史记录，不会添加历史记录，也就是说无论执行多少次都只会有一条记录，参数可以参考 history.pushState 的参数。此方法在这里暂时没有用到。