Vue中如何利用Router去掉url中默认的锚点

# Vue中如何利用Router去掉url中默认的锚点

## 问题背景

在Vue项目中使用`vue-router`时，默认情况下路由切换会在URL末尾添加锚点（`#`），例如：

http://example.com/#/home

这种哈希模式（hash mode）虽然能实现前端路由无刷新跳转，但会影响URL美观性和SEO效果。本文将介绍两种去除锚点的方案。

## 方案一：启用HTML5 History模式

### 实现步骤
1. 修改路由配置：
```javascript
const router = new VueRouter({
  mode: 'history', // 关键配置
  routes: [...]
})

1. 服务器端需配合支持（以Nginx为例）：

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

注意事项

• 需要后端支持，否则刷新页面会出现404
• 适合生产环境部署
• 需处理可能的静态资源路径问题

方案二：自定义哈希模式（过渡方案）

实现原理

通过重写vue-router的哈希模式实现无#效果：

const router = new VueRouter({
  mode: 'hash',
  hashType: 'noslash', // 自定义配置
  routes: [...]
})

兼容性处理

if ('scrollRestoration' in history) {
  history.scrollRestoration = 'manual'
}

对比分析

最佳实践建议

1. 开发环境：可直接使用History模式
2. 生产环境：
   • 如果有服务器控制权，优先选择History模式
   • 静态站点托管可使用哈希模式+自定义处理
3. SEO优化：配合vue-meta等插件完善页面元信息

常见问题解决

Q：启用History模式后页面刷新404？ A：确保服务器已配置URL重定向到index.html

Q：如何保留锚点功能但去掉#？ A：可通过scrollBehavior配置实现：

const router = new VueRouter({
  scrollBehavior(to) {
    if (to.hash) {
      return { selector: to.hash }
    }
  }
})

通过合理配置，Vue项目可以既保持路由功能，又获得简洁的URL结构。 “`

（全文约560字）