vue3 hash 子路由

Vue3 中的 `hash` 模式通常用于处理子路由。当我们在 Vue 应用程序中使用 HTML5 History API 时，如果启用 `history.pushState`，默认的 URL 变更不会更新浏览器的地址栏，而是通过哈希(`#`)来表示路由变化。在这种模式下，Vue Router 使用 `#/route/:param` 的形式来组织子路由。

例如，如果你有一个博客应用，你可以这样设置：

<!-- 主路由 -->
<router-link to="/blog">Blog</router-link>
<!-- 子路由 -->
<router-view></router-view>

// 配置文件中
{
  path: '/blog',
  component: Blog,
  children: [
    { path: 'post/:postId', component: Post },
  ]
}

在这个例子中，访问 `/blog` 显示整个博客列表，而访问 `/blog/post/123` 则会显示 ID 为 123 的帖子详情页。当用户在浏览器前进或后退时，Vue Router 根据当前的 `hash` 来渲染相应的组件。

相关问题

vue中hash路由与历史路由

Vue中路由分为hash路由和历史路由两种，它们的区别在于路由的实现方式不同。

1. hash路由

在hash路由中，路由信息会被添加到URL的#后面，例如：http://example.com/#/home。这种方式可以避免浏览器刷新页面，因为修改#后面的内容不会触发浏览器的刷新操作，而且可以兼容老版本的浏览器。

Vue中使用hash路由需要使用Vue Router插件，并在Router实例中设置mode为'hash'。

2. 历史路由

在历史路由中，路由信息会被添加到URL的路径中，例如：http://example.com/home。这种方式可以使URL更加美观，但是每次切换路由时都会触发浏览器的刷新操作，因此会有一定的性能损失。

Vue中使用历史路由需要使用Vue Router插件，并在Router实例中设置mode为'history'。

总的来说，hash路由适用于单页应用，历史路由适用于多页应用。但是随着前端技术的发展，越来越多的单页应用也开始使用历史路由。

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

Vue中的路由可以分为基于`hash`的路由和基于`history`的路由，它们的主要区别在于如何处理URL以及浏览器的历史记录。

### 基于hash的路由

#### 工作原理：

1. **URL变动**：当用户访问带有路由路径的页面时，URL看起来像是 `http://yourwebsite.com/#/path/to/page` 的形式。这里的`#`后的部分是hash值，而不是真正的HTTP请求路径的一部分。

2. **与服务器无关**：这种模式不需要改变服务器配置即可添加路由功能，因为hash值只是客户端内部用于区分不同页面状态的一个标记，并不会触发服务器的HTTP请求。

3. **兼容性**：几乎所有现代浏览器都支持hashchange事件，因此基于hash的路由在大多数设备上都能正常工作，包括老版本的IE。

4. **历史记录**：浏览器的前进、后退按钮通常不会影响到hash值的修改，这意味着每一次导航都不会创建新的历史条目。

5. **链接和书签**：通过hash值生成的链接容易被复制并粘贴到邮件或其他应用中，因为浏览器默认会忽略`#`及之后的部分。

### 基于history的路由

#### 工作原理：

1. **URL变动**：与基于hash的路由相反，基于history的路由在实际URL中改变了路径，看起来更像是正常的HTTP请求路径，如 `http://yourwebsite.com/path/to/page`。这需要通过特定API（例如HTML5 History API）进行操作。

2. **与服务器有关**：为了让基于history的路由正常工作，需要在服务器端进行配置，允许动态更改URL。例如，通过设置服务器的响应头（如`RewriteEngine On`），让服务器能够理解当前路径并返回相应的资源。

3. **浏览器历史**：每当你导航到一个新的页面时，浏览器的历史记录会自动更新，包含最近访问过的页面。这对于用户体验来说是一个加分项，因为它利用了浏览器原有的导航功能。

4. **链接和书签**：链接和书签使用的是实际的URL路径，而不是hash值。这使得外部共享链接更直接地指向内容所在的位置。

### 实现方式差异

- **安装和配置**：对于基于hash的路由（如Vue Router默认提供的方式），只需按照官方指南初始化Vue Router即可。而基于history的路由则通常涉及额外的配置步骤，如引入并配置`history`模式。

- **性能**：由于涉及到与服务器的交互，基于history的路由通常在初次加载时可能需要额外时间来完成页面的跳转。

### 使用场景差异

- **安全性敏感应用**：基于history的路由更适合安全性和隐私敏感的应用，因为它不使用易受攻击的hash机制。

- **移动应用开发**：对于原生移动应用而言，基于history的路由可能是首选方案，因为它更好地利用了平台的原生特性。

总的来说，选择哪种类型的路由依赖于项目的需求、目标平台、对性能的要求以及是否需要考虑SEO等其他因素。了解两者之间的差异可以帮助开发者做出最合适的选择。