以上是一些最基本的难题，如果你要追求极致用户体验，还需要解决下面的难题：

1、定义多个页面

每个页面是由HTML+JS+CSS组成的。每个页面需要对应一个路由。

我说一下我在游戏《Dice Crush》中的做法。

它有3个页面：主页、选择关卡页面、游戏页面。如下图：

我给每个页面定义了一个template.js，用于存放html字符串。比如：

``js const template =

之后渲染页面时，只需要document.body.innerHtml = template，就可以把该页面的模板渲染到html文档上了。当然，渲染页面时，还需要给button绑定click事件。

因此，我们给每个页面声明一个template，再声明一个用于渲染该页面的函数（功能主要是给document.body.innerHtml赋值、给button添加click事件），就可以了。之后需要渲染哪个页面，就调用哪个页面的渲染方法。

2、页面切换，使用History API切换URL

需要切换页面时，我们需要使用history.pushState(null, '', '新的页面URL')来修改浏览器URL，同时调用上述渲染页面方法，把页面渲染在浏览器中。

3、a标签的问题

js linkElement.onclick = function (event) { if (event.button !== 0) return; if (event.ctrlKey || event.metaKey || event.shiftKey || event.altKey) return; event.preventDefault(); window.history.pushState(null, '', 'new-page.html'); // 手动渲染新的页面 };

event.button表示按下的是鼠标哪个按键（0是主按键，通常指鼠标左键或默认值）。如果用户是鼠标中键按下a标签、或者用户同时按下了Ctrl(Windos)、Command(Mac)、Shift，那么他应该期望是在新窗口打开，我们使用href原生行为即可。如果用户同时按下了Option，那么他应该期望是打开菜单栏，我们也执行原生行为。其它情况，都表明用户要在本页面点开那个网址，我们拦截原生的href，通过history.pushState实现，并手动渲染新的页面。

4、手动加载新页面、卸载旧页面

由于我们页面渲染是通过document.body.innerHtml实现的，所以会在加载新页面时自动卸载旧页面。

当然，如果你的旧页面在window上添加了一些事件监听器、计时器，也要记得手动卸载掉。做好清除工作，不然会出问题。

5、页面初次加载与监听事件onpopstate

页面初次加载时，我们需要根据路由渲染一个页面，示例代码如下：

js const init = () => { if (window.location.pathname.includes('play')) { renderGame(); } else if (window.location.pathname.includes('select')) { renderSelect(); } else { renderHome(); } }; init();

同样，当页面onpopstate时，即用户点击了「返回」、「前进」，依然停留在本页面时，我们也需要重新根据当前路由渲染一下页面。需要执行如下逻辑：

js window.onpopstate = init;

至此，我们手写的一个单页面应用就开发完成啦～这也是我在游戏《Dice Crush》中使用的方案，你学会了吗？

写在最后