vue router的hash和history

Vue Router的hash和history是两种不同的路由模式。

hash模式是指在URL中使用#符号来表示路由，例如：http://example.com/#/home。在hash模式下，路由的变化不会导致浏览器向服务器发送请求，因此可以实现单页应用的路由。

history模式是指在URL中不使用#符号来表示路由，例如：http://example.com/home。在history模式下，路由的变化会导致浏览器向服务器发送请求，因此需要服务器端的支持。

在Vue Router中，默认使用hash模式，可以通过设置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 的路由模式：

import { createRouter, createWebHashHistory, createWebHistory } from 'vue-router';

const router = createRouter({
  history: createWebHashHistory(), // 使用 hash 模式
  // history: createWebHistory(), // 使用 history 模式
  routes: [
    // 路由配置
  ],
});

其中，`createWebHashHistory()` 创建 hash 模式的路由实例，`createWebHistory()` 则创建 history 模式的路由实例。根据需要选择相应的模式进行配置。

面试题 vue router中hash模式和history模式的区别

Vue Router有两种模式：hash模式和history模式。它们的区别如下：

1. hash模式：URL中会包含一个#，例如http://example.com/#/home。当URL中的#后面的内容发生变化时，浏览器不会重新加载页面，而是会触发hashchange事件，然后根据新的URL显示相应的页面内容。

2. history模式：URL中不包含#，例如http://example.com/home。当URL发生变化时，浏览器会向服务器发送请求，服务器返回相应的HTML页面，浏览器重新加载页面并显示新的内容。

总的来说，hash模式的优点是兼容性好，可以在所有浏览器中使用，不需要服务器端的支持；缺点是URL中包含#，看起来不太美观。history模式的优点是URL看起来更加美观，没有#的干扰；缺点是需要服务器端的支持，否则刷新页面会出现404错误。