hash路由模式与history路由模式的区别是什么？

时间: 2023-04-04 21:03:05 浏览: 180

Vue下路由History模式打包后页面空白的解决方法

vue的路由在默认的hash模式下,默认打包一般不会有什么问题,不过hash模式由于url会带有一个#,不美观,而且在微信分享,授权登录等都会有一些坑.所以history模式也会有一些应用场景.新手往往会碰到history模式打包后页面一片空白的情况,而且没有资源加载错误的报错信息. 这个其实仔细研究下会发现,如果项目直接放的跟目录, 那么是没有问题的,如果是子目录,那么就会一片空白了.这个vue官方有解释,需要加一个base // base: '/history', // mode: 'history', 这个base即为项目路径. 以上两个都解决了,还是会发现,此时只有首页能访问,通 Vue.js 是一款流行的前端框架，它的路由管理器 Vue Router 提供了两种主要的路由模式：Hash 模式和 History 模式。这两种模式各有优缺点，适用于不同的应用场景。 Hash 模式是 Vue Router 默认采用的方式，它通过 URL 中的 `#` 符号来标识路径。这种模式的优点在于兼容性好，即使在不支持 HTML5 History API 的浏览器中也能正常工作，因为 `#` 之后的部分不会被服务器处理，而是由浏览器解析。然而，`#` 符号的存在使得 URL 显示不够优雅，同时在微信分享、授权登录等场景可能会遇到一些问题。相比之下，History 模式利用了 HTML5 的 History API，可以生成干净的、无 `#` 的 URL。这在用户体验和 SEO（搜索引擎优化）方面具有优势。但是，History 模式在部署时需要额外的配置，尤其是在服务器端。因为当用户直接访问一个非根路径（例如 `/history/somepage`），服务器如果没有正确的配置，将无法找到对应的资源，导致页面空白。在 Vue 项目中切换到 History 模式时，首先需要在 Vue Router 配置中明确指定 `mode`： ```javascript const router = new VueRouter({ base: '/history', mode: 'history', routes: [...] }); ``` 这里的 `base` 属性指定了项目的基础路径，如果项目位于服务器的子目录下，必须设置为该子目录的名称。然而，仅仅设置 `base` 和 `mode` 还不够。当用户在 History 模式下刷新页面或直接访问某个子路由时，服务器需要能够正确地将所有请求重定向到 `index.html`，以便 Vue Router 能够接管并解析路由。对于 Nginx 服务器，可以添加以下配置来实现这一目标： ```nginx location / { try_files $uri $uri/ /index.html; } location /history { root C:/web/static; index index.html index.htm; # 如果文件不存在，则重定向到 index.html if (!-e $request_filename) { rewrite ^/(.*) /history/index.html last; break; } } ``` 这里假设项目位于服务器的 `/history` 子目录下。`try_files` 和 `rewrite` 指令确保任何未匹配到实际文件的请求都将指向 `index.html`，使得 Vue Router 可以处理路由。需要注意的是，非根目录的项目需要在 Vue Router 的配置中添加 `base` 路径，以确保路由的正确解析。同时，对于其他服务器环境（如 Apache 或 IIS），也需要相应的配置来处理 History 模式的路由。 Vue Router 的 History 模式提供了更佳的 URL 体验，但部署时需要对服务器进行适当的配置，以避免页面空白的问题。理解这一点对于开发和维护 Vue 应用至关重要。

hash路由模式和history路由模式是两种前端路由模式，它们的主要区别在于URL的表现形式不同。hash路由模式使用URL中的#符号来表示路由，而history路由模式则使用HTML5的history API来实现路由。在hash路由模式下，URL中#后面的内容被认为是路由地址，而在history路由模式下，URL中的路径被认为是路由地址。此外，history路由模式可以使用浏览器的前进和后退按钮来控制路由，而hash路由模式则不能。

阅读全文

hash路由模式与history路由模式的区别是什么？

相关推荐

vue-router中的hash和history两种模式的区别

Vue路由history模式解决404问题的几种方法

路由模式hash和history有什么区别

Vue 路由的hash 模式和history 模式有什么区别

Vue的路由hash模式和 history模式的区别

路由模式区别 hash history

路由模式hash和history区别

vue3路由模式hash和history的区别

hash和history路由模式的区别

hash 和 history 路由模式 监听

vue路由模式hash和history

路由的hash和history模式的区别

react-routerV5 hash路由转换成history路由需要改动什么？

vue路由hash与history区别

请说说vue的两种路由模式及区别?history上线问题

vue中的hash模式和history模式有什么区别

hash模式和history模式两者的优缺点是什么

vue中hash路由和history路由的区别

路由history模式

最新推荐

Vue下路由History模式打包后页面空白的解决方法

详解Vue路由History mode模式中页面无法渲染的原因及解决

详解如何去除vue项目中的#——History模式

vue router嵌套路由在history模式下刷新无法渲染页面问题的解决方法

《CSS样式表行为手册》中文chm最新版本

火炬连体网络在MNIST的2D嵌入实现示例

管理建模和仿真的文件

L2正则化的终极指南：从入门到精通，揭秘机器学习中的性能优化技巧

如何构建一个符合GB/T19716和ISO/IEC13335标准的信息安全事件管理框架，并确保业务连续性规划的有效性？

Angular插件增强Application Insights JavaScript SDK功能

hash 和 history 路由模式监听