在刷新或手动写入时，路由器URL不起作用-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，我们通常会使用路由器（router）来管理应用程序的URL。这使得我们可以将不同的页面映射到不同的URL上，从而实现单页应用程序（SPA）和良好的用户体验。然而，在某些情况下，我们可能会发现当手动输入URL或刷新页面时，路由器不起作用并且无法正确地显示页面。本文将介绍这个问题的原因以及解决方法。

原因

当手动输入URL或刷新页面时，浏览器会向服务器发送请求以获取相应的HTML文件。这是因为浏览器不能确定这个URL是否是在当前应用程序中定义的路由器URL。如果服务器没有正确配置，它将无法返回正确的HTML文件，并将返回404错误页面。

此外，一些Web服务器可能会有默认行为，例如把所有不存在的文件都重定向到首页。这也会导致路由器URL不起作用。

解决方法

配置服务器

要解决这个问题，我们需要在服务器上进行一些配置。我们需要告诉服务器，任何与我们应用程序中定义的路由器URL匹配的URL都应该返回我们的HTML文件，而不是404错误页面或者默认的首页。具体来说，我们需要配置服务器以返回index.html文件，并让前端路由器接管后续的路由。

以下是一些常见的Web服务器的配置示例：

Apache：

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

Nginx：

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

使用Hash模式

如果您无法修改服务器配置，或者您正在使用一些特殊的环境（如Cordova、Electron等），您可以考虑使用Hash模式。在Hash模式下，URL中的#符号将用于分隔路由器URL和参数。这样，浏览器就不会将#后面的内容发送到服务器，而只会将前面的URL发送到服务器。因此，服务器将始终返回正确的HTML文件，并且前端路由器可以将#后面的内容用作参数。

要使用Hash模式，请将路由器的mode属性设置为'hash'。

import { createRouter, createWebHashHistory } from 'vue-router'

const router = createRouter({
  history: createWebHashHistory(), // 使用Hash模式
  routes: [
    // ...
  ]
})

结论

在本文中，我们介绍了当手动输入URL或刷新页面时，路由器URL可能不起作用的原因以及解决方法。我们需要在服务器上进行一些配置来确保正确地返回HTML文件，并让前端路由器接管后续的路由。如果无法修改服务器配置，我们可以考虑使用Hash模式来解决这个问题。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/8761