提卡网站怎么做,搜索引擎优化培训,国内wordpress主机,核酸结果查询前言
第一次看到Vue的路由模式的时候#xff0c;有点分不清楚 createWebHashHistory()和 createWebHistory的区别#xff0c;感觉功能也差不多。后来去搜了一下发现前面的那个叫做哈希模式#xff0c;哈希模式通过URL的hash#xff08;即#后面的部分#xff09;来实现前端…前言
第一次看到Vue的路由模式的时候有点分不清楚 createWebHashHistory()和 createWebHistory的区别感觉功能也差不多。后来去搜了一下发现前面的那个叫做哈希模式哈希模式通过URL的hash即#后面的部分来实现前端路由。我寻思着好像我在html里面见过这东东找了找遗失的记忆果然存在。和我们用来浏览器定位的锚链接相同点击锚链接也同样会发生地址的改变但是页面不会进行刷新。因此我查阅了一下资料。咦原来这种使用hash路由不进行页面刷新的应用叫做SPA单页应用。 传统的HTTP协议是无状态的这意味着服务器端在完成一次请求响应后并不能主动向客户端推送内容每次请求新的资源如从/page1跳转到/page2都需要浏览器重新发送请求服务器返回完整的HTML文档。这不仅增加了网络负担也让用户在等待页面加载时体验不佳。
而单页应用的出现彻底改变了这一现状。通过前端路由技术如Hash Router我们能够在不重新加载整个页面的情况下实现页面内容的动态替换仅仅通过修改URL的哈希值即URL中#后面的部分就能模拟页面跳转从而实现无刷新的页面过渡极大地提升了用户体验。
Hash Router的工作原理
Hash Router的核心在于监听URL的哈希值变化即hashchange事件。这个事件是浏览器原生的JS事件,无论是否使用 Vue.js 或其他框架。当浏览器的 URL 的 hash即 URL 中 # 后面的部分发生变化时会触发 hashchange 事件。当用户点击链接或通过JavaScript操作改变URL的哈希部分时浏览器会触发此事件而不会重新加载页面。Hash Router利用这一特性根据不同的哈希值加载相应的组件或视图更新页面内容。我们可以进行自己的手写一个简单的基于哈希hash的路由系统来实现一下hash 路由的使用。
路由系统实现
HTML结构 nav idnavullia href#/page1page1/a/lilia href#/page2page2/a/lilia href#/page3page3/a/li/ul
/nav
div idcontainer/div这里定义了一个导航菜单包含三个链接分别指向不同的哈希路径#/page1, #/page2, #/page3。div idcontainer作为内容展示区域将根据路由变化动态更新其内容。大家可以先创建一个html将内容复制然后点击查看一下url路径的改变和页面有无进行刷新
HashRouter 类进行路由管理
class HashRouter {constructor() {this.routes {};//page Component// window.addEventListener(hashChange, this.load.bind(this), false)window.addEventListener(hashchange, () {this.load();}, false)}register(hash, callback function () { }) {this.routes[hash] callback;}registerIndex(callback function () { }) {this.routes[index] callback;}load() {console.log(location.hash);let hash location.hash.slice(1);//去掉# 方是路由console.log(hash);if (!hash) {//首页this.routes[index] this.routes[index].call(this);} else {//相应页面this.routes[hash] this.routes[hash].call(this);}}}
构造函数初始化路由对象并监听hashchange事件当哈希值改变时调用load方法。register方法允许用户注册一个哈希路径和对应的处理函数。registerIndex方法特化处理首页逻辑确保没有哈希时显示首页。load方法根据当前哈希值查找路由表执行相应的处理函数更新页面内容。
这里进行路由加载的时候需要特别注意需要先进行路由是否注册的判断因为用户可能进行非法输入但是你没有相对的路由注册那么就会报错。所以这里我们先进行路由检查在进行路由相对应的处理函数。
路由注册与初始化
let router new HashRouter();
router.registerIndex(() container.innerHTML h1首页/h1);
router.register(/page1, () container.innerHTML h1page1/h1);
router.register(/page2, function () {console.log(this, this.routes);container.innerHTML h1page2/h1;
});
router.register(/page3, () container.innerHTML h1page3/h1);
console.log(router.routes);
router.load();创建实例创建HashRouter的实例router。注册路由分别注册了首页和其他页面的路由处理逻辑当路由被命中时会将container的innerHTML替换为对应页面的内容。初始化加载手动调用router.load()进行首次页面加载展示当前哈希对应的页面内容。
初始化加载主要是进行路由分享进来的用户可以直接定位当前路由展示的页面组件
总结
这段代码通过定义一个简单的HashRouter类实现了基本的单页应用路由功能。当用户点击导航链接改变URL哈希时会触发页面内容的无刷新更新。通过直接操作DOM即container.innerHTML来展示不同页面是早期SPA开发的一种常见模式虽然简单但直观展示了SPA路由的核心原理。随着框架如Vue Router的发展现代SPA应用更多采用组件化的路由管理但理解这段基础逻辑对于深入学习前端路由机制非常有帮助。 本次文章就分享到这里了喜欢的话就点个关注和赞吧- ̗̀(๑ᵔ⌔ᵔ๑)。
