单页应用、前端路由：hash+history

最新推荐文章于 2023-08-04 09:01:59 发布

贾明恣

最新推荐文章于 2023-08-04 09:01:59 发布

阅读量272

点赞数

分类专栏： JavaScript基础

本文链接：https://blog.csdn.net/weixin_43342290/article/details/115940243

版权

单页应用，只有一个入口文件，都是通过js异步在浏览器中渲染出来，会导致大部分搜索引擎无法收录我们的网页在性能差的移动设备上，首次加载速度慢所以出现了服务端渲染SSR，S渲染完生成HTML再返回给客户端。使用webpack构建浏览器和服务器环境的应用（同构应用），即用一份代码分别编译为浏览器和服务器环境下的代码。所以使用API和模块时需要考量两个环境是否都支持。SEO搜索引擎优化为了从搜索引擎中获得更多的免费流量，从网站结构、内容建设方案等角度进行合理规划。...

摘要由CSDN通过智能技术生成

单页应用SPA，只有一个入口文件，都是通过js异步在浏览器中渲染出来，无需刷新页面就可以在不同页面间切换，且页面访问记录会被浏览器保存。在性能差的移动设备上，首次加载速度慢。

因为单页模式所有的数据均由AJAX从后端接口获取（客户端渲染），当搜索引擎爬虫抓取页面的时候，并不执行JavaScript所以获取的往往只是一个空的HTML。

SSR也就是服务端渲染，也就是将Vue在客户端把标签渲染成HTML的工作放在服务端完成，然后再把html直接返回给客户端。
SSR有着更好的SEO、并且首屏加载速度更快等优点。不过它也有一些缺点，比如我们的开发条件会受到限制，服务器端渲染只支持beforeCreate和created两个钩子，当我们需要一些外部扩展库时需要特殊处理，服务端渲染应用程序也需要处于Node.js的运行环境。还有就是服务器会有更大的负载需求。

在这里插入图片描述
单页应用主要依赖两种技术。
JavaScript框架提供渲染和页面切换的能力。即后文的前端路由
AJAX/websocket

前端路由、后端路由、vue-router

路由可以理解为url到函数的映射
后端路由会根据请求的URL，来找到相应的映射函数，然后执行该函数，并将函数的返回值发送给客户端。
静态资源服务器：所有URL的映射函数就是一个文件读取操作
动态资源，映射函数可能是一个数据库读取操作，也可能是进行一些数据的处理，等等。

/users      ->  getAllUsers()

网站中URL与页面存在映射，这里有两种方式：前端路由(单页应用、客户端喧染)、后端路由（SSR）

早期的路由都是后端实现的，根据 url 来 reload 页面，页面变复杂服务器端压力变大
ajax 出现，页面实现非 reload 就能刷新数据，并且通过记录 url 来记录 ajax 的变化，从而实现前端路由。
再者，单页应用（SPA）逐渐成为前端主流，其一大特点就是由前端来直接控制路由跳转逻辑，
前端根据不同的url地址来进行一些DOM的显示和隐藏操作，达到展示不同的内容或页面

动态路由与静态路由
静态路由是路径固定的路由
动态路由：有时候需要在路径中传入参数，例如获取某个用户的信息，不可能为每个用户创建路由，而是通过捕获路径中的参数（例如用户id）来实现。

前端路由

hash路由兼容性更好，不需对服务器做改动
history API更正式，但是需要对服务器进行改造

Hash API

原理: url中的 #位置的标识符 代表网页中的位置，通过hashChange() 事件监听hash值的变化, 根据路由表对应的hash值来判断加载对应的路由加载对应的组件

#用来指导浏览器动作的，对服务器端完全无用。

#后面的字符都不会被发送到服务器端，所以请求涉及#字符需要转义
~~http://www.example.com/?color=#fff~~ 　http://example.com/?color=%23fff

改变#后的部分，浏览器只会滚动到相应位置，不会重新加载网页。同时会在浏览器的访问历史中增加一个记录，使用"后退"按钮，就可以回到上一个位置。

#值即window.location.hash读写
读取判断网页状态是否改变；写入可以在不重载网页的前提下，创造一条访问历史记录。
HTML 5新增的事件onhashchange事件，当#值发生变化时，就会触发这个事件。

对于不支持onhashchange的浏览器，可以用setInterval监控location.hash的变化

window.onhashchange = func;
<body onhashchange="func();">
window.addEventListener("hashchange", func, false);

于ajax应用程序中，可以用不同的#值，表示不同的访问状态，然后向用户给出可以访问某个状态的链接。

为网页位置指定标识符，有两个方法。锚点、id属性

<a name="print"></a>
<div id="print" >

<!-- html：菜单中href设置为hash形式，id为app中放置页面内容 -->
<ul id="menu">
    <li>
        <a href="#index">首页</a>
    </li>
    <li>
        <a href="#news">资讯</a>
    </li>
    <li>
        <a href="#user">个人中心</a>
    </li>
 
</ul

最低0.47元/天解锁文章

贾明恣

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
单页应用、前端路由：hash+history

单页应用，只有一个入口文件，都是通过js异步在浏览器中渲染出来，会导致大部分搜索引擎无法收录我们的网页在性能差的移动设备上，首次加载速度慢所以出现了服务端渲染SSR，S渲染完生成HTML再返回给客户端。使用webpack构建浏览器和服务器环境的应用（同构应用），即用一份代码分别编译为浏览器和服务器环境下的代码。所以使用API和模块时需要考量两个环境是否都支持。SEO搜索引擎优化为了从搜索引擎中获得更多的免费流量，从网站结构、内容建设方案等角度进行合理规划。...
复制链接

扫一扫

专栏目录