路由模式,hash和history,她是如何在改变界面却不用发起一次新的请求的
时间: 2024-05-17 11:15:36 浏览: 68
在前端路由中,路由模式分为两种:hash 模式和 history 模式。在 hash 模式下,路由信息会被存储在 URL 的 hash 中,即 URL 中的 # 后面的内容。在 history 模式下,路由信息会被存储在 URL 的路径中,即 URL 中的 / 后面的内容。
当用户访问一个新路由时,浏览器会根据当前路由信息去加载对应的组件。在路由信息变化时,前端框架会根据当前路由信息去判断需要加载哪些组件,并将其渲染到页面上,从而实现界面的变化。
在 hash 模式中,当 URL 的 hash 发生变化时,浏览器会自动将变化的 hash 发送到服务器,服务器会返回对应的 HTML 页面,但是浏览器不会刷新整个页面,而是只会刷新页面的一部分,即 hash 后面的内容。这样就实现了在改变界面的同时不用发起新的请求。
在 history 模式中,当 URL 的路径发生变化时,浏览器会自动发送一个 AJAX 请求,请求对应的组件,然后将组件渲染到页面上,同样不用刷新整个页面,从而实现了在改变界面的同时不用发起新的请求。
相关问题
路由模式hash和history区别
路由模式和历史模式是Vue.js的两种不同的路由方式。
路由模式使用哈希值(#)在URL中标记路由信息,例如:http://www.example.com/#/home。这种方式在浏览器中也会被称为锚点(Anchor)。使用路由模式时,路由信息会被始终保留在URL的#后面,因此不会影响浏览器发送请求到服务器的时候,服务器可以正常解析URL。
历史模式使用HTML5的history API,其不同之处是路由信息不再使用#号,而是直接标记在URL上,例如:http://www.example.com/home。这种方式是基于HTML5的新特性实现的,需要浏览器支持才能使用。与路由模式相比,历史模式在URL上的标记更加有语义化,使得URL更加直观和易读。
总之,两种路由方式都可以实现相同的功能,具体使用哪种取决于实际需求和浏览器环境。
vue路由模式hash和history
vue路由有两种模式:hash模式和history模式。
hash模式是将路由信息放在URL的hash部分(即#后面的部分),例如:http://example.com/#/about,因此hash模式下的URL不会发送到服务器,只会在客户端进行匹配。
history模式将路由信息放在了正常的URL中,例如:http://example.com/about,因此history模式下的URL会发送到服务器,而需要服务器配置来重定向到正确的页面,所以它需要在服务器和客户端配合使用。
一般情况下,在开发环境使用hash模式,在生产环境使用history模式。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)