当前位置：首页 > news >正文

Vue：路由管理模式

news 2025/8/5 13:41:35

三种模式

Vue.js 的路由管理有三种模式：

Hash 模式（默认）：在 URL 中使用 # 符号来管理路由。例如，http://example.com/#/about。这个模式的好处是可以避免浏览器向服务器发送不必要的请求，并且不需要特殊的服务器配置。
History 模式：不使用 # 符号来管理路由，而是直接在 URL 中显示路径。例如，http://example.com/about。这个模式需要服务器配置支持，因为当用户访问直接 URL 时，服务器需要返回 Vue.js 应用程序的 index.html 文件。
Abstract 模式：这种模式只在测试和非浏览器环境下使用，它不会对 URL 进行任何更改，也不会与浏览器历史记录交互。

const router = new VueRouter({mode: 'history',routes: [...]
})

除了上述三种模式，还有其他高级路由技术如懒加载、路由守卫等，可以帮助您更好地管理和优化 Vue.js 应用程序的路由。

History模式原理

Vue.js 的路由管理 History 模式的原理是使用 HTML5 History API。这个 API 允许我们使用浏览器的前进和后退按钮，而不需要重新加载页面。
在 History 模式下，当用户访问 Vue.js 应用程序中的一个具体 URL 时，服务器将返回应用程序的 index.html 文件。然后，Vue.js 应用程序会加载并解析该文件，并根据 URL 中的路径渲染正确的组件。
为了保证在非Vue.js路由下也能直接访问子路由，通常情况下需要在服务器上进行相关配置，确保访问任何子路径都返回index.html文件。
例如，在 Nginx 中，我们可以使用以下配置：

# 这样就可以保证无论用户访问的 URL 是什么，服务器都会返回 index.html 文件。
# 然后，Vue.js 应用程序会根据 URL 中的路径渲染正确的组件。
location / {try_files $uri $uri/ /index.html;
}

需要注意的是，在开启 History 模式的情况下，如果您的 Vue.js 应用程序使用了相对路径来加载资源，可能会出现问题。因为这些资源路径是相对于 URL 根路径计算的，而不是相对于文件路径计算的。所以，请确保在使用 History 模式时正确设置 publicPath 配置项来指定相对路径的基本 URL。

Hash模式原理

在 hash 模式下，URL 中的路由信息位于 # 符号后面，例如http://example.com/#/home。当路由信息发生变化时，前端可以获取到路由信息有哪些变化，从而局部渲染加载页面，而不会重新加载整个页面。这使得 Vue.js 可以更快速地响应路由变化，而且不需要请求服务器返回页面。
hash模式其实是利用的是浏览器的锚点机制，URL中#后的内容是用于锚定到页面内部某个位置的，修改它不会重新发送GET请求。因为锚点信息仅存在于浏览器端，不会发送到服务器端。要重新发送GET请求，需要直接修改URL路径或使用页面跳转方法（如点击链接或通过JavaScript执行页面重定向）
Vue.js 实现 hash 模式的方式是通过监听浏览器的 hashchange 事件来实现的。当 hash 值发生变化时，Vue.js 会根据新的 hash 值渲染对应的组件。同时，Vue.js 还提供了一个名为 VueRouter 的路由管理器，它封装了所有与 hash 模式相关的操作，包括路由跳转、路由参数处理等。

补充：Vue使用hash模式时也可以在URL中使用锚点。例如，在使用hash模式的情况下，您可以将URL设置为http://example.com/#/path/to/resource#anchor，其中anchor就是锚点。但是需要注意的是，锚点并不会影响路由器的导航行为，它只是用于页面内部跳转到指定位置。