前言
总所周知，随着前端应用的业务功能起来越复杂，用户对于使用体验的要求越来越高，单面（SPA）成为前端应用的主流形式。而大型单页应用最显著特点之一就是采用的前端路由跳转子页面系统，通过改变页面的URL，在不重新请求页面的情况下，更新页面视图。
更新视图但是浏览器不重新渲染整个页面，只是重新渲染部分子页面，加载速度快，页面反应灵活，这是 SPA 的优势，这也是前端路由原理的核心，这会给人一种仿佛在操作 APP 一样的感觉，目前在浏览器环境中实现这一功能的方式主要有两种：
- 利用
URL的hash(#) - 利用
H5新增方法History interface
利用URL的Hash(#)
在 H5 还没有流行开来时，一般 SPA 都采用 url 的 hash(#)作为锚点，获取到 # 之后的值，并监听其改变，再进行渲染对应的子页面。
可见此时我们已经完全监听到了 URL 的变化，页面上的内容也对应改变了。
那么，该如何载入不同的页面呢，目前来说有三种方式：
- 寻找节点内容并改变（也就是上面我们演示的内容）
import一个JS文件，文件内部export模版字符串- 利用
AJAX加载对应的HTML模版
第一种方式已经演示过，不过这种方式局限性太大，下面我会演示另外两种方式加载页面。
import 方式
定义一个 JS 文件 ，名为 demo1.js，在里面输入内容：
const str = ` <div> 我是import进来的JS文件 </div> ` export default str在主文件里 import 进来，并进行测试(使用 Chrome 一定要使用服务器开启，或者直接用火狐打开）：
<body> <h1 id=
