浅谈前端路由

jlanglang 发布于2019-08-23 15:19 / 1914人阅读

摘要：路由的概念起源于网络工程，例如我们日常中的路由器，所谓前端路由的概念简单归纳就是前端可以自己根据不同地址来展示不同的内容在出现之前，都是使用后端路由来控制页面的渲染，服务器在接收到不同的地址后，服务器通过解析去拼接不同的，然后返回给前端进行

路由的概念起源于网络工程，例如我们日常中的路由器，所谓前端路由的概念简单归纳就是前端可以自己根据不同url地址来展示不同的内容

在Ajax出现之前，都是使用后端路由来控制页面的渲染，服务器在接收到不同的url地址后，服务器通过解析url去拼接不同的html，然后返回给前端进行渲染，所以这也是后端路由的一个弊端，每一次的切换都是需要刷新整个页面，同时如果是大量的页面每一个页面都需要做一段逻辑处理也造成了后端实在不堪重负

前端路由的出现很好的解决了这个问题，前端路由不需要刷新整个页面，也就不会出现每一次切换都会出现闪烁，也没有网络延迟，大大提升了用户体验，减轻了服务器的压力，但是同时也存在问题是前端的安全性问题

目前前端路由的实现主要采用两个方法

hash

history

hash

hash就是我们通常说的锚点，一般用于内容的快速定位，但是hash值有一个特点，就是会改变url，但是不会触发浏览器的刷新，利用这个特点，我们配合可以检测到hash值变化的hashchange事件就能比较容易实现前端路由

window.addEventListener("hashchange",function () {
    console.log("锚点值改变了");
      //发送ajax请求，局部刷新页面，加载模块等操作
})

history

history是window对象的一部分，包含用户在浏览器中访问过的历史记录

属性

length：该属性会返回浏览器中历史记录的数量

state：返回一个历史记录中顶部记录的状态值

scrollRestoration：允许浏览器自定义设置默认的滚动行为，该属性有两个值，auto和manual

这里关于scrollRestoration属性我们多说一点，在JavaScript中有一个叫做scrollTo的方法，该方法可以指定滑动位置，例如可以用来控制我们每一次聊天内容都固定在窗口的底部

test.scrollTo(0,test.scrollHeight)

但是有时候并不会生效，这个有可能就是scrollRestoration的原因，因为浏览器是默认保持滚动位置的，也就是说浏览器设置history的默认值是auto，我们需要将其设置为manual

history.scrollRestoration="manual"

这个是时候就可以正常的按照我们的需求每一次固定到窗口底部了

如果有兼容性问题采用如下写法

setTimeout(() => {
    window.scrollTo(0, document.body.scrollHeight)
})

方法

back：返回上一条历史记录

forward：前往下一条历史记录

go：前往指定的历史记录，history.go(1)相当于history.forward()，history.go(-1)相当于history.back()

同时在js中也存在一个popstate的方法可以监测到浏览器的前进/后退，同时在该方法中可以获取到历史记录的状态对象

window.addEventListener("popstate",function (e) {
    console.log(e.state)
})

在HTML5中新增加了两个方法pushState，replaceState

这两个方法都是在不触发浏览器的刷新机制下改变浏览器的url，不同之处在于pushState相当于在浏览器历史记录栈中添加了一条我们自定义的历史记录，而replaceState相当于用我们自己设置的历史记录替换掉了浏览器当前的历史记录栈中的第一条，所以pushState会改变history的length长度，而replaceState则不会

这两个方法都接收三个参数

state，一个指定网址相关的状态对象

title，指定新页面的标题，但是目前被大部分浏览器忽略

url，指定新的网址，但是必须是和当前网址是同源的

这两个方法都是不能被popstate监测到的，但是在执行两个方法的时候是能够触发history.state的从而我们可以拿到我们每一次增加/替换历史记录时的state，可以通过观察者模式来实现对history状态的监听

let page=1
ahead.addEventListener("click",function () {
    page++;
    window.history.pushState({page : page}, "test", "#test");
    console.log(window.history.state);
      //通过state值可以加载不同模块/发送数据请求，局部刷新页面
})
window.addEventListener("popstate",function (e) {
    console.log(e.state)
      //在用户点击后退、前进时会被postate监测到，同时也会获取到state  
})

云服务器 GPU云服务器前端路由 js前端路由 js前端路由原理设计浅谈

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/101859.html

浅谈NUXT - 基于vue.js的服务端渲染框架

摘要：是一款基于的服务端渲染框架，跟的异曲同工。该配置项用于定义应用客户端和服务端的环境变量。 Vue因其简单易懂的API、高效的数据绑定和灵活的组件系统，受到很多前端开发人员的青睐。国内很多公司都在使用vue进行项目开发，我们正在使用的简书，便是基于Vue来构建的。我们知道，SPA前端渲染存在两大痛点：（1）SEO。搜索引擎爬虫难以抓取客户端渲染的页面meta信息和其他SEO相关信息，使...

yearsj 2019-08-01 17:18 评论0 收藏0
浅谈NUXT - 基于vue.js的服务端渲染框架

摘要：是一款基于的服务端渲染框架，跟的异曲同工。该配置项用于定义应用客户端和服务端的环境变量。 Vue因其简单易懂的API、高效的数据绑定和灵活的组件系统，受到很多前端开发人员的青睐。国内很多公司都在使用vue进行项目开发，我们正在使用的简书，便是基于Vue来构建的。我们知道，SPA前端渲染存在两大痛点：（1）SEO。搜索引擎爬虫难以抓取客户端渲染的页面meta信息和其他SEO相关信息，使...

godiscoder 2019-08-20 18:29 评论0 收藏0
浅谈Nodejs应用的主文件index.js的组成部分

摘要：搭建一个应用，少不了一个主文件，不少人根据各自喜好来定义名字，像。总结一个完整的由个部分组成，大家只要把主文件当成白雪公主，把个组成部分当作七个小矮人就行了，哈哈，这个记法真天才。前言 Node妹子的问世，着实让我们前端攻城狮兴奋了一把，尤其本屌听说Javascript可以写服务端后，兴奋的像是看到了二次元萝莉的胖子...(●◡●)。呃哼...YY先到这里，原谅本屌是个二次元萝莉控。...

Profeel 2019-08-21 14:18 评论0 收藏0