Vue Router 4 中的createWebHistory 显示不出重定向后的网页内容和 createWebHashHistory的区别

Vue Router 4 是 Vue.js 3 的官方路由库，它提供了多种方式来创建路由实例。createWebHistory 和 createWebHashHistory 都是 Vue Router 4 中用于创建历史记录管理器的方法。

1. createWebHistory

• 用途：使用浏览器的 HTML5 History API 来管理路由。
• URL 形式：不包含 # 符号，直接使用路径（例如 /about）。
• 示例：

  import { createRouter, createWebHistory } from 'vue-router';
  import routes from './routes';
  const router = createRouter({
    history: createWebHistory(process.env.BASE_URL),
    routes
  });
  export default router;

  2. createWebHashHistory

  • 用途：使用 URL 的哈希部分（即 # 后面的部分）来管理路由。
  • URL 形式：包含 # 符号，例如 /#about。
  • 示例：

    import { createRouter, createWebHashHistory } from 'vue-router';
    import routes from './routes';
    const router = createRouter({
      history: createWebHashHistory(),
      routes
    });
    export default router;

    区别总结

    1. URL 形式：

       • createWebHistory：/about
       • createWebHashHistory：/#about

    2. 服务器配置：

       • createWebHistory：需要服务器配置支持，确保所有路径都能正确指向入口文件（通常是 index.html）。
       • createWebHashHistory：不需要服务器配置支持，适用于任何服务器。

    3. 刷新页面：

       • createWebHistory：如果服务器配置不当，刷新页面可能会导致 404 错误。
       • createWebHashHistory：刷新页面不会导致 404 错误。

    4. SEO：

       • createWebHistory：更适合 SEO，因为搜索引擎爬虫可以抓取真实的路径。
       • createWebHashHistory：不太适合 SEO，因为搜索引擎爬虫可能不会抓取哈希部分的内容。

    都是 Vue Router 4 的一部分

    createWebHistory 和 createWebHashHistory 都是 Vue Router 4 的一部分。Vue Router 4 提供了这些方法来帮助开发者选择合适的路由模式。

    服务器配置问题：需要服务器端的支持，确保所有路径都能返回主页面（通常是 index.html）。当使用 createWebHistory 时，服务器必须被配置为将所有的未知请求都转发到你的应用程序的入口文件（通常是 index.html）。否则，在用户手动输入 URL 或刷新页面时，服务器可能会返回 404 错误

    解决方案建议

    1. 常见的服务器配置示例

       Nginx

       如果你使用的是 Nginx 作为服务器，可以在配置文件中添加以下内容：

       server {
         listen 80;
         server_name yourdomain.com;
         location / {
           try_files $uri $uri/ /index.html;
         }
       }

       Apache

       如果你使用的是 Apache 服务器，可以在 .htaccess 文件中添加以下内容：

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