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

在使用Vue.js开发单页应用（SPA）时，Vue Router是一个非常重要的工具，它帮助我们管理应用的路由和导航。然而，在某些情况下，Vue Router默认的行为可能会导致URL中出现不必要的锚点（#），这可能会影响用户体验或SEO优化。本文将详细介绍如何通过配置Vue Router来去掉URL中的默认锚点。

1. 理解Vue Router的默认行为

在Vue Router中，默认的路由模式是hash模式。在这种模式下，URL会包含一个#符号，例如：

http://example.com/#/home

这种模式的好处是它不需要服务器端的特殊配置，因为#后面的部分不会被发送到服务器。然而，对于某些应用场景来说，这种URL结构可能不够美观，或者不符合SEO的要求。

2. 使用History模式去掉锚点

为了去掉URL中的#，我们可以将Vue Router的模式从hash模式切换到history模式。在history模式下，URL会变得更加简洁，例如：

http://example.com/home

2.1 配置History模式

要启用history模式，只需在创建Vue Router实例时，将mode选项设置为'history'：

import Vue from 'vue';
import Router from 'vue-router';
import Home from './components/Home.vue';
import About from './components/About.vue';

Vue.use(Router);

const router = new Router({
  mode: 'history', // 启用history模式
  routes: [
    { path: '/', component: Home },
    { path: '/about', component: About }
  ]
});

export default router;

2.2 服务器端配置

启用history模式后，还需要确保服务器端能够正确处理这些URL。因为在这种模式下，所有的路由请求都会被发送到服务器，如果服务器没有正确配置，可能会导致404错误。

对于常见的服务器，配置如下：

• Apache: 在.htaccess文件中添加以下内容：

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

• Nginx: 在Nginx配置文件中添加以下内容：

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

• Node.js (Express): 在Express应用中添加以下中间件：

  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, () => {
    console.log('Server is running on port 3000');
  });

2.3 处理404页面

在history模式下，如果用户直接访问一个不存在的路由，服务器会返回404错误。为了避免这种情况，我们可以在Vue Router中定义一个通配符路由，用于显示自定义的404页面：

const router = new Router({
  mode: 'history',
  routes: [
    { path: '/', component: Home },
    { path: '/about', component: About },
    { path: '*', component: NotFound } // 通配符路由
  ]
});

3. 其他注意事项

• SEO优化: 使用history模式可以改善SEO，因为搜索引擎更容易抓取不带#的URL。
• 兼容性: 确保你的应用在所有目标浏览器中都支持HTML5 History API。大多数现代浏览器都支持，但如果你需要支持旧版浏览器（如IE9及以下），可能需要回退到hash模式。
• 部署: 在部署应用时，确保服务器配置正确，以避免404错误。

4. 总结

通过将Vue Router的模式从hash模式切换到history模式，我们可以去掉URL中的默认锚点，使URL更加简洁和友好。虽然这需要一些服务器端的配置，但带来的好处是显而易见的，尤其是在SEO和用户体验方面。希望本文能帮助你更好地理解和使用Vue Router的history模式。