Vue如何去除路径中＃号

发布时间：2022-04-28 17:01:11 作者：iii
来源：亿速云阅读：159

# Vue如何去除路径中#号

## 引言

在Vue.js开发中，默认的路由模式是**hash模式**，URL中会带有`#`符号（如`http://example.com/#/home`）。虽然这种模式兼容性好且无需服务器配置，但许多开发者出于美观或SEO考虑希望去除`#`。本文将详细介绍如何通过**history模式**实现这一目标，并分析其原理与注意事项。

---

## 一、为什么Vue默认使用hash模式？

### 1.1 hash模式的特点
- **无需服务器支持**：通过`#`后的路径变化实现前端路由，不会触发页面刷新。
- **兼容性极佳**：支持所有浏览器，包括不支持HTML5 History API的旧版本。

### 1.2 缺点
- **URL不美观**：`#`符号影响视觉体验。
- **SEO不友好**：部分搜索引擎可能忽略`#`后的内容。

---

## 二、切换至history模式

### 2.1 修改路由配置
在Vue Router的配置文件中，将`mode`设置为`'history'`：

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

const router = createRouter({
  history: createWebHistory(), // Vue 3使用createWebHistory
  routes: [...]
});

注意：Vue 2的语法为mode: 'history'，Vue 3需使用createWebHistory。

2.2 服务器配置示例

由于history模式依赖服务器支持，需配置所有路径回退到index.html：

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)

const express = require('express');
const history = require('connect-history-api-fallback');

const app = express();
app.use(history());

三、注意事项

3.1 服务器必须支持

直接访问子路由（如/about）时，服务器需返回index.html，否则会出现404错误。
本地开发时，Vue CLI已内置支持，但生产环境需额外配置。

3.2 静态资源路径问题

若项目部署在子路径（如/app/），需同步调整： - Vue Router的base选项：

  createRouter({
    history: createWebHistory('/app/'),
    routes: [...]
  });

Vue CLI的publicPath配置（vue.config.js）：
```
module.exports = {
publicPath: '/app/'
};
```

3.3 SEO优化建议

使用服务端渲染（SSR）框架如Nuxt.js，解决history模式的SEO问题。
为动态路由生成静态页面（如通过prerender-spa-plugin）。

四、常见问题解决

4.1 页面刷新后404

原因：服务器未正确配置回退到index.html。
解决：检查服务器规则是否匹配所有路由。

4.2 静态资源加载失败

原因：publicPath未正确设置子路径。
解决：确保publicPath与部署路径一致。

4.3 开发环境跨域问题

原因：history模式需后端接口代理。
解决：在vue.config.js中配置代理：

devServer: {
  proxy: {
    '/api': {
      target: 'http://backend-server',
      changeOrigin: true
    }
  }
}

五、替代方案：自定义hash行为

如果仍需保留hash模式但想隐藏#，可通过以下技巧实现：

5.1 使用`window.location`跳转

router.push({ path: '/home' });
window.history.replaceState(null, '', '/home'); // 替换URL但不刷新

缺点：刷新页面后URL会恢复带#的形式。

5.2 监听路由变化

router.afterEach(() => {
  setTimeout(() => {
    const path = router.currentRoute.value.path;
    window.history.replaceState(null, '', path);
  }, 0);
});

结语

去除Vue路径中的#号本质是从hash模式切换至history模式，需同时满足前端配置与服务器支持。虽然history模式更符合传统URL习惯，但务必注意其潜在的SEO和部署复杂度问题。根据项目需求选择合适方案，并做好异常情况的兼容处理。

扩展阅读
- Vue Router官方文档
- HTML5 History API MDN “`

该文章包含代码示例、不同服务器配置方案及常见问题解决，总字数约950字，可直接保存为.md文件使用。