前端知识库前端路由-简介

简介: 在前端架构中,路由的设计的合理与否决定了这个项目的是否优秀。现在前端的框架angular,vue react都有对应的路由插件,在页面渲染方便基本都不用我们前端工程师考虑,基本上我们安装他们的文档配置好路由都能良好的运行,但是这并不意味我们不需要去掌握路由的实现原理。

前言


在前端架构中,路由的设计的合理与否决定了这个项目的是否优秀。现在前端的框架angular,vue react都有对应的路由插件,在页面渲染方便基本都不用我们前端工程师考虑,基本上我们安装他们的文档配置好路由都能良好的运行,但是这并不意味我们不需要去掌握路由的实现原理。

发展


初始的web路由(后端控制)

  • 后台控制路由渲染
  • 页面跳转会重新渲染整个页面
  • 浏览可以自动记录页面路由跳转历史
  • 所有内容需要浏览器向服务器发出请求
  • 服务器端返回对应路由的信息
  • 需要浏览器再次解析返回信息
var express = require('express');
var path = require('path');
var app = express();
// 设置模版渲染引擎路径
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'jade');
//nodejs根据路由渲染
var express = require('express');
var router = express.Router();
/* GET home page. */
router.get('/index', function(req, res, next) {
  res.render('index', { title: 'I am index.' });
});
/* GET home page. */
router.get('/admin', function(req, res, next) {
  res.render('admin', { title: 'I am admin.' });
});
module.exports = router;

总结:简单来说路由就是用来跟后端服务器进行交互的一种方式,通过不同的路径,来请求不同的资源,请求不同的页面是路由的其中一种功能。

单页面路由机制(前端完全控制)

  • 静态文件只需要请求一次
  • 路由跳转页面只需要部分刷新
  • 前端完全设计路由
  • 只有动态数据与后台进行ajax交互
  • 实现方式:hash和history

对比

后台控制 单页面路由机制
加载速度 加载所有数据,重新渲染dom 部分dom渲染以及部分数据
切换效果 重新刷新中间白屏 平滑过渡
动态数据交互 ajax交互 ajax交互
维护成本 前后端沟通 只需要前端控制

从对比中我们可以发现,单页面路由机制无论在维护成本,渲染速度以及用户体验度上都是完胜后台控制设计的路由。这也是目前除了一些老项目还采用后台控制路由的方式其他基本都是采用单页面路由机制渲染的原因。

注:现在的ssr渲染本质上也是属于单页面路由设计,ssr只是采用了后台进行首屏渲染,路由的实际控制权还是在前端的。

单页面路由实现方式

hash实现方式

  • 介绍:还记得刚开始工作时做过公司的官网,那个时候tab的跳转就是直接加载另一个html,但这样会在第一次切换是如果页面资源过大会导致白屏。后来搜索了下解决方案就是所有的tab内容放到一个页面里每个部分加上不同的hash然后点击tab通过hash来显示相应的html。我想这应该是最初的单页面路由实现方式的。
  • 实现方式:利用dom的事件hashchange(当URL的片段标识符更改时,将触发hashchange事件 (跟在#符号后面的URL部分,包括#符号))来监听路由上hash的边从而渲染对应的页面。
// 监听hash变化
window.addEventListener('hashchange', function(event){ 
    console.log('===current hash===')
    console.log(window.location.hash)
    console.log('new url====='+ event.newURL); // hash 改变后的新 url
    console.log('old url====='+ event.oldURL)// hash 改变前的旧 url
},false)
//或者此种写法
window.onhashchange = funcRef;
function funcRef(event){
    ......
}
let hash = window.location.hash; // 获取当前 hash 值
//在html中可以加入一下代码测试
    <div>
        <a href="#/hash1">hash1</a>
        <a href="#/hash2">hash2</a>
        <a href="#/hash3">hash3</a>
    </div>

注:回调函数中的参数说明请查看文档

  • 总结:hash路由可以较好的实现页面的交互,并且对于浏览器有良好的兼容性,但是唯一不足的是他的设计美观上,hash路由中必须带个#,这对于我们线上项目来说是非常不美观的,随着html5的api发展hash在前端路由中必将会被慢慢的取代。

h5的history实现

  • 介绍:在 HTML5 出现之前,浏览器就已经有了 history 对象。但在早期的 history 中只能用于多页面的跳转有以下的api:
history.go(num);// num 正数为前进num页 负数为后退num页
history.forward();// 前进一页
history.back(); //后退一页

在html5的api中history新增了可以控制路由的几个api:

//param1:状态对象 title:标题(保留字段)   url:路由url
history.pushState(stateObj,title,url)
history.replaceState(stateObj,title,url)  // 替换当前路由状态
history.state   // 获取history中的状态对象

注:详细文档请查看mdn文档

  • 实现方式:
待研究过react-router和vue-route源码后再来补上

对比

hash模式的优点:

  1. 兼容性更好
  2. 无需服务器处理非单页应用中的路由
  3. 当前页面刷新不会404(history需要服务器配置)

history 模式的优点:

  1. 路由设计更优雅(没有#)。
  2. 页面中可以继续使用锚点功能
  3. 相同的路由仍然可以放到历史栈中。

注:就个人而言觉得history是前端路由的发展方向

参考

「前端进阶」彻底弄懂前端路由

总结


自工作以来已有四年多了,接触前端这块应该有五年多了,随着学的东西越多约会发现自己对于知识的匮乏,时而焦虑自己笨拙,时而害怕会被时代抛弃,但随着年龄渐渐的增长,生活渐渐的稳定,心态也慢慢平缓,只要你够努力生活必然不会负你。废话不多说了,最后送诸君一句:书山有路勤为径,学海无涯苦作舟。诸君共勉。

相关文章
|
2月前
|
移动开发 前端开发 JavaScript
前端vue2、vue3去掉url路由“ # ”号——nginx配置(一)
前端vue2、vue3去掉url路由“ # ”号——nginx配置
174 0
|
2月前
|
前端开发 JavaScript 应用服务中间件
前端vue2、vue3去掉url路由“ # ”号——nginx配置(二)
前端vue2、vue3去掉url路由“ # ”号——nginx配置
156 0
|
8天前
|
JavaScript 前端开发 API
前端框架与库 - Vue.js 组件与路由
【7月更文挑战第15天】Vue.js 框架以简洁API和高效DOM更新著名,组件和路由是构建应用的关键。组件是自包含的实例,常见问题包括命名冲突、作用域混淆和状态管理。要避免这些问题,可使用命名空间、明确数据绑定和事件,以及采用Vuex管理状态。Vue Router提供声明式路由,常见挑战包括路由守卫、动态路由参数和懒加载配置。正确使用路由守卫、处理动态参数和实现代码分割能优化路由管理。提供的代码示例展示了基本组件和路由配置。
|
1月前
|
XML 前端开发 JavaScript
前端简介(HTML+CSS+JS)
前端简介(HTML+CSS+JS)
|
2月前
|
前端开发
前端路由机制实现hash-history
前端路由机制实现hash-history
29 1
|
2月前
|
前端开发 网络架构
1天搞定SpringBoot+Vue全栈开发 (8)前端路由VueRouter(进行组件切换)
1天搞定SpringBoot+Vue全栈开发 (8)前端路由VueRouter(进行组件切换)
|
2月前
|
前端开发 开发者 iOS开发
【Flutter前端技术开发专栏】Flutter中的路由管理与页面跳转
【4月更文挑战第30天】本文介绍了Flutter的路由管理与页面跳转,包括基本和命名路由管理。基本路由使用`Navigator`的`push`和`pop`方法,如`MaterialPageRoute`和`CupertinoPageRoute`。命名路由则通过路由表注册名称进行跳转,如`Navigator.pushNamed`。此外,还展示了如何通过构造函数、`arguments`和`PageRouteBuilder`进行路由传值。掌握这些知识能提升Flutter开发效率。
【Flutter前端技术开发专栏】Flutter中的路由管理与页面跳转
|
2月前
|
缓存 前端开发 JavaScript
【JavaScript 技术专栏】JavaScript 前端路由实现原理
【4月更文挑战第30天】本文探讨了JavaScript前端路由在SPA中的重要性,阐述了其基本原理和实现方式,包括Hash路由和History路由。前端路由通过监听URL变化、匹配规则来动态切换内容,提升用户体验和交互性。同时,文章也提到了面临的SEO和页面缓存挑战,并通过电商应用案例分析实际应用。理解并掌握前端路由能助开发者打造更流畅的单页应用。
|
2月前
|
前端开发 JavaScript 数据可视化
前端vite+vue3——自动化配置路由布局
前端vite+vue3——自动化配置路由布局
52 0
|
2月前
|
机器学习/深度学习 人工智能 前端开发
【前端】JavaScript简介
【前端】JavaScript简介
30 0