从前端路由到 vue-router

早期前端路由介绍

在早期的前后端尚未分离的时候，前端的路由一般是由后端控制，当在页面上点击 a 链接跳转的时候，会将对应的路径请求发送到后端，后端通过将路由和对应的页面模板进行匹配，返回一整个页面给浏览器，浏览器拿到页面后执行刷新操作，从而实现访问不同的地址得到不同页面的逻辑。但是这样会存在一个问题，就是每次导航的时候都需要更新整个页面，但是现实应用中，常常是会有部分内容是不需要每次更新的，例如网站的 banner。我们想要的是每次导航的时候，只更新文档指定的部分，就这个而言，后端路由显得有点力不从心。再者，在大型复杂的应用中，涉及到的路由很多而且多是动态变化，这对于服务端路由控制而言也是极其不便的，于是，前端路由控制便应运而生。

浏览器前端路由 API - History

History 是 HTML5 新增的浏览器全局 API, 该接口允许用户操作浏览器曾经在标签页或者框架里访问的会话历史记录。History 对象主要有以下的几个方法:

History.back()

前往上一页, 相当于用户点击了浏览器左上角的返回按钮, 也等价于 history.go(-1)。

History.forward()

在浏览器历史记录里前往下一页，相当于用户点击了浏览器左上角的前进按钮, 等价于 history.go(1).

History.go()

通过当前页面的相对位置从浏览器历史记录( 会话记录 )加载页面。比如：参数为 -1 的时候为上一页，参数为 1 的时候为下一页。当整数参数超出界限时，该操作无效果，当传 0 的时候相当于刷新页面。

History.pushState()

该方法用于在历史中添加一条记录，其使用方式如下所示:

history.pushState(state, title, url) // 其中三个参数的意义分别为 state: Object // 一个与被添加的记录关联的对象。在 popstate 事件中可以得到对应的 state 对象的副本。 title: String // 新页面的标题。但是，现在所有浏览器都忽视这个参数。 url: String // 新的网址，必须与当前页面处在同一个域(否则会失败报错),浏览器的地址栏将显示这个网址。

执行该语句后，会往 histroy 对象里面添加一条新的记录，浏览器地址栏将显示新的地址，但是并不会加载新的文档，甚至不会检查该地址是否存在。

history.replaceState() 该方法和 pushState 类似，不同的是， replaceState 修改 History 对象的当前记录。

popstate 事件

这是 HTML5 新增的一个全局事件，这个事件会在当活动历史记录更改的时候触发, 大部分情况下，当同一个文档的浏览历史（即 history 对象）出现变化时，就会触发popstate事件，但是仅仅调用pushState()方法或replaceState()方法 ，并不会触发该事件，只有用户点击浏览器后退按钮和前进按钮，或者使用 JavaScript 调用 History.back、History.forward、History.go 方法时才会触发。

其使用方式如下:

window.addEventListener('popstate', function () { console.log('history change') console.log(event.state) // 打印当前记录的 state 对象 }); history.pushState({state: 1}, '', '/foo') history.pushState({state: 2}, '', '/bar') history.pushState({state: 3}, '', '/test') // 当前记录为 '/test', state = {state: 3} history.back() // 回退，当前记录为 '/bar' 所以打印结果为: history change {state: 2} history.back() // 回退，当前记录为 '/foo' 所以打印结果为: history change {state: 1} history.back() // 回退当初始页面，初始页面的 state 为 undefined, 所以打印结果为 history undefined

利用 History API 和 popstate 事件，结合 AJAX, 我们可以实现在不刷新页面的情况下切换路由和更新页面。

浏览器路由 API - hash

所谓 hash, 即是字符串 URL 的锚部分, 比如一个地址链接为 http://www.example.com/#/page1, 那么气 hash 值为 location.hash = '#/page1'。以 hash 作为路由一个好处是，hash 值部分的内容不会提交到服务，也就是如果只改变 hash 部分，那么浏览器不会发送新的请求，且该 hash 记录会被添加到浏览器的访问历史记录中。例如：

// 假设当前路径为 www.example.com location.hash = 'page1' // 路径变为 www.example.com/#page1 location.hash = 'page2' // 路径变为 www.example.com/#page2 location.hash = 'page3' // 路径变为 www.example.com/#page3 history.length // 4， 上述的操作改变了访问的历史记录， 所以也会触发 popstate 事件 history.back() // 路径变为 www.example.com/#page2 history.back() // 路径变为 www.example.com/#page1 history.forward() // 路径变为 www.example.com/#page2

另外 hash 值也常常作为定位到页面某个元素的锚点。

hashchange 事件

hashchange 事件是 HTML5 新增的事件，当 url 处的哈希值改变的时候，便会触发此事件。例如:

window.addEventListener('hashchange',function() { console.log(location.href) console.log('hash change') }); // 假设当前路径为 www.example.com location.hash = 'page1' // www.example.com/#page1 hash change location.hash = 'page2' // www.example.com/#page1 hash change history.pushState(null, null, '/bar') // www.example.com/bar, 不会触发 hashchange

hash 改变不会触发浏览器的请求的表现似乎天然适合前端路由，结合 AJAX 技术，前端可以基本的控制前端路由，但是 hash 这种路由控制的方式不利于搜索引擎，因为搜索引擎不会抓取哈希值部分。

NAT Vue web前端

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。