详解前端路由

最新推荐文章于 2025-07-29 18:01:59 发布

LynnWonderLu

最新推荐文章于 2025-07-29 18:01:59 发布

阅读量468

点赞数 2

CC 4.0 BY-SA版权

分类专栏： note Javascript 文章标签：前端路由 vue-router

本文链接：https://blog.youkuaiyun.com/lynnwonder6/article/details/90289707

Javascript 同时被 2 个专栏收录

33 篇文章

订阅专栏

note

22 篇文章

订阅专栏

本文介绍了路由的概念、用途和实现原理，对比了前后端路由。后端路由接收请求、处理数据并渲染页面，有SEO和首屏渲染优势，但用户体验差、服务器压力大。前端路由通过DOM操作显示不同组件，用户体验好。还介绍了前端路由的hash和history两种实现模式及注意事项。

概念：

简单一句话：页面跳转的规则。
用途：路由就是随着浏览器地址栏的变化，展示给用户的页面也不相同。
实现原理：URL到函数的映射。

发展历程：

后端路由：又称服务器端路由。简单来讲就是：

接收到客户端发来的http请求（get/post请求）-->根据请求的URL找到相应的映射函数，映射函数更像一个数据读取操作，譬如静态资源服务器而言，所有URL的映射函数是一个文件读取操作，而对于动态资源而言，映射函数可能是数据库读取操作，也可能是一些数据处理。-->根据映射函数读取到的数据在服务器端使用相应的模板对页面进行渲染后，-->返回渲染完毕的页面。（这个就是常见的前端面试题中从浏览器输入一个网址到页面渲染出来的过程中：前端发送请求，后端接收并且返回html模板的过程）

但后端路由并不意味着服务端渲染，以下说的几条是服务端渲染的优点和缺点：

有利于SEO
首屏渲染快
但是：用户体验差，每次请求都要重新向服务器发起请求，慢。
但是：服务器压力大
但是：代码耦合性大，维护起来臃肿麻烦
但是：服务器崩溃前端页面也访问不到

前端路由：路由的映射函数通常是进行一些DOM的显示和隐藏操作，访问不同路径时，会显示不同的页面组件。在SPA中，组件式开发，打包发布时整个前端项目只有一个js文件一个HTML文件。（如果没有代码分割）页面只在第一次进入的时候请求一次js,html（后端路由来做），后面所有的页面跳转和渲染都是异步数据请求。用户体验极佳。

ps:SPA单页应用，这有一个完整的页面，在加载页面的时候，不会加载整个页面，而是只更新某个指定容器中的内容，单页应用的核心之一是更新视图但是不重新请求页面。SPA具体就是在前后端分离的基础上加一层前端路由。

更多关于路由的内容：我在学习笔记(4)-react-router原理中做了部分介绍

前端路由的实现：

hash路由：示例：http://www.example.com#mytest001

#可以认为是URL的锚点。关于HTML锚点的使用请查看这位老师的文章：锚点回到顶部

使用URL的hash模拟一个完整的URL，于是当URL改变时，页面不会重新加载，也就是说hash出现在URL中但是不会被包含在HTTP请求中，对后端没有任何影响。
每次改变#后的部分，都会在浏览器的访问历史中增加一个记录，使用“后退”按钮，就可以回到上一个位置。
原理是onhashchange事件监听hash值的变化，可以在window对象上监听这个事件

触发hash变化的方式有两种：

<a href="#mytest">mytest</a>

location.hash="#mytest"

像在vue-router中：默认模式即使hash模式，hash模式一个缺点就是带着#不太好看。但是它兼容性更好，不需要对服务器做改动。

history模式：要想使URL更加美观那么可以使用history模式

使用H5新增的history API实现URL的变化：主要是history.pushState()和history.repalceState()。两者都是在不进行刷新的情况下，操作浏览器的历史记录，唯一不同的是前者是新增一个历史记录，后者是直接替换当前的历史记录。两个方法都接收三个参数：分别是state object/title/URL，但是这两种方法都不会导致浏览器立即加载URL，但可能会在稍后的某些情况下加载这个URL。具体参见MDN：Manipulating the browser history。
这种模式需要后台配置支持，因为如果用户没有正确的配置，直接访问一个如http://www.example.com/mytest001就会返回404，或者在当前页面刷新了页面后浏览器就耿直的去请求服务器了，解决方法有两种：

在服务端增加一个覆盖所有情况的候选资源：如果URL匹配不到任何静态资源，则应该返回一个你配好的页面。（仍然是前端配置）

如下：

export default new Router({
  linkActiveClass:"active",
  routes: [
  	{
      path: '*', // 覆盖所有情况
      component: NotFound // 当然也可以使用redirect：“/”跳转到首页
    }
])}

采用静态文件的形式，让每个目录都存在就不会报错了。

因为目前并没有接触太多服务端的内容，以后接触了以后我会持续更新！！

需要注意的几点：

hash模式下在地址栏随便敲改变#后的值不会像history模式一样出现服务端不设置就会404的情况，因为此时发送请求不会携带#后的内容，只会进入根容器（App.vue）页面的显示.
需要明确的是：只要在浏览器地址栏输入URL再回车一定会向后端服务器请求一次。而如果实在页面通过点击按钮利用router库的api进行的URL更新是不会向后端服务器请求的。
history模式下一旦从地址栏瞎敲了一个地址，这个URL一定是会向后端发起一个get请求的，后端路由表里没有配置相应的路由就会返回404.但是为啥我试验了一下我在开发模式下没问题啊？？？原因如下：vue-cli集成了webpack，因而启动webpack-dev-server（webpack提供的服务于http请求的小型express服务器）帮你做了这方面的配置，所以没404