网站繁体和中文这么做,东莞 包装制品 东莞网站建设,广东人社厅网上服务平台,wordpress后台添加新的文章类别文章目录 hash和history模式区别Hash 模式History 模式 在 Vue 中#xff0c;路由的两种主要模式是
hash 和
history#xff0c;默认的路由模式是hash模式。。这两种模式决定了 URL 的外观以及浏览器如何处理 URL 的变化。 hash和history模式区别
特性Hash 模式History 模… 文章目录 hash和history模式区别Hash 模式History 模式 在 Vue 中路由的两种主要模式是
hash 和
history默认的路由模式是hash模式。。这两种模式决定了 URL 的外观以及浏览器如何处理 URL 的变化。 hash和history模式区别
特性Hash 模式History 模式URL 表现形式URL 中带有 # 符号如 http://example.com/#/aboutURL 看起来更干净没有 # 符号如 http://example.com/about服务器配置不需要特殊的服务器配置需要服务器配置以支持客户端路由返回 index.html兼容性所有现代浏览器都支持大多数现代浏览器都支持但在一些较旧的浏览器或特殊环境中可能不支持美观度URL 中带有 # 符号可能看起来不太美观URL 看起来更干净没有额外的符号SEO# 后面的内容不会被搜索引擎视为页面的一部分与常规页面一样可以被搜索引擎索引书签书签中的 URL 会包含 # 符号书签中的 URL 更简洁刷新页面刷新页面时通常能够保持当前路由状态如果没有正确的服务器配置刷新页面可能会返回 404 错误浏览器前进/后退按钮正常工作正常工作配置方式Vue Router 默认使用 Hash 模式需要在创建 Vue Router 实例时明确指定 mode: history Hash 模式
hash值会出现在URL里面但是不会出现在HTTP请求中对后端完全没有影响。所以改变hash值不会重新加载页面。这种模式的浏览器支持度很好低版本的IE浏览器也支持这种模式。hash路由被称为是前端路由已经成为SPA单页面应用的标配。
特点
URL 中会带有一个 # 号例如 http://example.com/#/home浏览器不会将带有 # 及其后面的部分发送到服务器请求资源仅改变 # 后面的部分不会重新加载页面兼容性较好所有现代浏览器都支持
切换到hash模式 Vue2.x中 const router new VueRouter({mode: hash,routes
})Vue3.x中 const router createRouter({history: createWebHashHistory(),routes
});hash模式的主要原理就是onhashchange()事件
window.onhashchange function(event){console.log(event.oldURL, event.newURL);let hash location.hash.slice(1);
}使用onhashchange()事件的好处就是在页面的hash值发生变化时无需向后端发起请求window就可以监听事件的改变并按规则加载相应的代码。
除此之外hash值变化对应的URL都会被浏览器记录下来这样浏览器就能实现页面的前进和后退。虽然是没有请求后端服务器但是页面的hash值和对应的URL关联起来了。 History 模式
history模式的URL中没有#它使用的是传统的路由分发模式即用户在输入一个URL时服务器会接收这个请求并解析这个URL然后做出相应的逻辑处理。
虽然history模式丢弃了丑陋的#。但是它也有自己的缺点就是在刷新页面的时候如果没有相应的路由或资源就会刷出404来。
特点
URL 看起来更加“干净”没有 # 号例如 http://example.com/home浏览器会将 URL 的变化当作一个普通的页面跳转可能会向后端服务器发起请求需要后端进行配置以便对所有路由都返回同一个页面通常是 index.html否则就会404兼容性相对较差IE9 以下不支持
切换到history模式 Vue2.x中 const router new VueRouter({mode: history,routes: [...]
})Vue3.x中 const router createRouter({history: createWebHistory(),routes
});后端配置
当使用 history 模式时需要确保后端服务器对所有路由都返回同一个页面通常是 index.html。 以下是一个 Nginx 的配置示例
location / { try_files $uri $uri/ /index.html;
}这个配置告诉 Nginx如果请求的文件或目录不存在$uri 和 $uri/ 都不匹配就返回 index.html。 这样无论用户访问哪个 URL都会返回 Vue 应用的入口文件然后由 Vue Router 接管后续的路由处理。
