当前位置：首页 > VUE

vue路由实现模式

2026-01-16 06:15:02VUE

Vue路由实现模式

Vue Router 提供了两种路由实现模式：Hash 模式和 History 模式。两种模式的主要区别在于 URL 的表现形式以及后端支持的需求。

Hash 模式

Hash 模式使用 URL 的 hash（#）部分来实现路由。例如：

http://example.com/#/user

Hash 模式的特点：

兼容性好，支持所有浏览器。
不需要后端配置，因为 hash 部分的变化不会导致页面刷新。
URL 中包含 #，可能影响美观。

配置方式：

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

History 模式

History 模式利用 HTML5 History API（pushState 和 replaceState）来实现路由。例如：

http://example.com/user

History 模式的特点：

URL 更简洁，没有 #。
需要后端支持，确保在直接访问或刷新页面时返回正确的 HTML 文件。
兼容性稍差，不支持 IE9 及以下版本。

配置方式：

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

后端配置示例

对于 History 模式，常见的后端服务器配置如下：

Nginx

location / {
  try_files $uri $uri/ /index.html;
}

Apache

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
</IfModule>

Node.js (Express)

vue路由实现模式

const express = require('express')
const path = require('path')
const app = express()

app.use(express.static(path.join(__dirname, 'dist')))

app.get('*', (req, res) => {
  res.sendFile(path.join(__dirname, 'dist', 'index.html'))
})

app.listen(3000)