前端路由和后端路由

程序员文章站 2024-02-14 22:37:46

...

前端路由

定义：在单页面应用中，大部分页面结构不变，只改变部分内容的使用
优点：用户体验好，不需要每次都从服务器全部获取，快速展现给用户
缺点：使用浏览器的前进，后退键的时候会重新发送请求，没有合理地利用换缓存，单页面无法记住之前滚动的位置，无法在前进，后退的时候记住滚动的位置

前端路由的主要模式：history和hash

1 History API

1.1 back()方法
此异步方法转到会话历史记录中的上一页，与用户单击浏览器的“后退”按钮时的操作相同。等同于history.go(-1)。调用此方法以返回会话历史记录的第一页之外不会产生任何效果，也不会引发异常。

1.2 forward()
此异步方法转到会话历史记录的下一页，与用户单击浏览器的“前进”按钮时的操作相同；这相当于history.go(1)。调用此方法以超越会话历史记录中的最新页面是无效的，并且不会引发异常
1.3 go()
从会话历史记录异步加载页面，该页面由会话相对于当前页面的相对位置标识，例如，上一页为-1，下一页为1。如果指定边界值（例如，在会话历史记录中没有以前访问的页面时指定-1），则此方法将无任何作用。go()不带参数或值为0的调用将重新加载当前页面。

两个新增的API：
history.pushState 和 history.replaceState
可以在不刷新页面的情况下操作浏览器的历史记录
pushState会增加一条新的历史记录，而replaceState则会替换当前的历史记录

pushState(stateObject,title,url)

let stateObj = {
foo: "bar",
};

history.pushState(stateObj, "page 2", "bar.html");
这将导致URL栏显示http://mozilla.org/bar.html，但不会导致浏览器加载bar.html甚至检查bar.html是否存在。

replaceState(stateObject,title,url)

var stateObj = { foo: "bar" };
history.pushState(stateObj, "page 2", "bar.html");
history.replaceState(stateObj, "page 3", "bar2.html");

MDN文档介绍

2 Hash

我们经常在 url 中看到 #，这个 # 有两种情况，一个是我们所谓的锚点，比如典型的回到顶部按钮原理、Github 上各个标题之间的跳转等，路由里的 # 不叫锚点，我们称之为 hash，大型框架的路由系统大多都是哈希实现的。

同样我们需要一个根据监听哈希变化触发的事件 —— hashchange 事件

我们用 window.location 处理哈希的改变时不会重新渲染页面，而是当作新页面加到历史记录中，这样我们跳转页面就可以在 hashchange 事件中注册 ajax 从而改变页面内容

hashchange 在低版本 IE 需要通过轮询监听 url 变化来实现，我们可以模拟如下

(function(window) {

  // 如果浏览器不支持原生实现的事件，则开始模拟，否则退出。
  if ( "onhashchange" in window.document.body ) { return; }

  var location = window.location,
  oldURL = location.href,
  oldHash = location.hash;

  // 每隔100ms检查hash是否发生变化
  setInterval(function() {
    var newURL = location.href,
    newHash = location.hash;

    // hash发生变化且全局注册有onhashchange方法（这个名字是为了和模拟的事件名保持统一）；
    if ( newHash != oldHash && typeof window.onhashchange === "function"  ) {
      // 执行方法
      window.onhashchange({
        type: "hashchange",
        oldURL: oldURL,
        newURL: newURL
      });

      oldURL = newURL;
      oldHash = newHash;
    }
  }, 100);
})(window);

后端路由

定义：通过用户请求的url导航到具体的html页面；每跳转到不同的URL，都是重新访问服务端，然后服务端返回页面，页面也可以是服务端获取数据，然后和模板组合，返回HTML，也可以是直接返回模板HTML，然后由前端js再去请求数据，使用前端模板和数据进行组合，生成想要的HTML

对比

1.从性能和用户体验的层面来比较的话，后端路由每次访问一个新页面的时候都要向服务器发送请求，然后服务器再响应请求，这个过程肯定会有延迟。而前端路由在访问一个新页面的时候仅仅是变换了一下路径而已，没有了网络延迟，对于用户体验来说会有相当大的提升。 　
　　　
2.在某些场合中，用ajax请求，可以让页面无刷新，页面变了但Url没有变化，用户就不能复制到想要的地址，用前端路由做单页面网页就很好的解决了这个问题。但是前端路由使用浏览器的前进，后退键的时候会重新发送请求，没有合理地利用缓存。

路由跳转

Vue-router有两种跳转方式：

第一种：使用 router-link 创建 a 标签来定义导航链接
第二种：借助 router 的实例方法，通过编写代码来实现