vue中hash和history的区别
时间: 2023-03-26 14:03:28 浏览: 92
Vue 中 hash 和 history 的区别在于路由模式的不同。Hash 模式下,URL 中的 # 符号后面的内容被称为 hash,它不会被包含在 HTTP 请求中,因此对于后端来说是无效的。而 History 模式下,URL 中的路径会被包含在 HTTP 请求中,因此后端需要配置对应的路由规则来匹配 URL。在使用 Vue Router 时,可以通过 mode 属性来指定路由模式,例如 mode: 'history' 或 mode: 'hash'。
相关问题
vue路由hash和history区别
Vue 路由中 hash 模式和 history 模式都是用来管理路由的方式,它们的主要区别在于 URL 的形式和浏览器的行为。
1. hash 模式:URL 中带有 # 符号,例如:http://example.com/#/home。在 hash 模式下,浏览器不会向服务器请求新的页面,而是只会修改页面的锚点,从而实现页面的切换。这种模式可以兼容低版本的浏览器,但是 URL 不太美观。
2. history 模式:URL 中没有 # 符号,例如:http://example.com/home。在 history 模式下,浏览器会向服务器请求新的页面,服务器返回相应的页面。这种模式可以使 URL 更加美观,但是需要服务器端的支持。
总的来说,hash 模式适用于简单的页面应用,而 history 模式适用于复杂的单页面应用(SPA),需要服务器端的支持。在 Vue 中,默认使用的是 hash 模式。如果需要使用 history 模式,需要在路由配置中设置 mode 为 "history"。
vue router hash 和 history
Vue Router 提供了两种路由模式:hash 模式和 history 模式。
1. Hash 模式:
在 hash 模式下,URL 中的路由会以 "#/" 开头,例如:http://example.com/#/home。这种模式下,路由的改变不会导致页面的刷新,而是通过监听 URL 的 hash 值变化来实现路由切换。Vue Router 默认使用的就是 hash 模式。
2. History 模式:
在 history 模式下,URL 中的路由不再带有 "#/",例如:http://example.com/home。这种模式下,路由的改变不会有 "#" 符号出现在 URL 中,看起来更加美观。但是需要注意的是,history 模式需要服务器端的支持,因为在 history 模式下刷新页面或直接访问某个 URL 时,会向服务器发送请求,所以需要配置服务器以返回正确的页面。
你可以通过以下方式配置 Vue Router 的路由模式:
```javascript
import { createRouter, createWebHashHistory, createWebHistory } from 'vue-router';
const router = createRouter({
history: createWebHashHistory(), // 使用 hash 模式
// history: createWebHistory(), // 使用 history 模式
routes: [
// 路由配置
],
});
```
其中,`createWebHashHistory()` 创建 hash 模式的路由实例,`createWebHistory()` 则创建 history 模式的路由实例。根据需要选择相应的模式进行配置。
相关推荐
![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)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)