当重新访问URL时,Vue路由器返回404

Question

我只是启用了Vue路由器历史记录模式.当我通过v-href或href访问vue路由时,它工作正常.但是,当我尝试刷新该页面或直接从浏览器地址栏,它只返回404.是否有任何选项接受刷新/重新访问该URL？

以下是我的Vue路由器配置

var router = new VueRouter({
    hashbang: false,
    history: true,
    mode: 'html5',
    linkActiveClass: "active",
    root:  '/user'
});

Answer 1

通过刷新页面,您使用当前URL向服务器发出请求,服务器返回404.您必须在Web框架或Web服务器级别上处理此问题.

https://router.vuejs.org/en/essentials/history-mode.html

Answer 2

我想你错过了SPA不是服务器端渲染.至少对大多数人而言.因此,当您访问/任何内容时,您的Web服务器不会将其重定向到index.html.但是,如果你点击任何vuejs路由器链接,它将工作,因为javascript开始行动,而不是服务器端.

要解决此问题,请使用.htaccess并将所有请求重定向到index.html

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

希望它可以帮到某人!

Answer 3

更妙的是（在Ubuntu），如果你有root权限将修改/etc/apache2/apache2.conf，因为即使自己的Apache劝阻使用.htaccess在这种情况下。

请注意，首先，您必须执行

sudo a2enmod rewrite

然后，将以下块添加到/etc/apache2/apache2.conf：

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

在这之后，做

sudo systemctl restart apache2

对我来说，这完美无缺，因为它不仅将 Vue 创建的路由重定向回/.

Answer 4

如果有人在 .NET Core 作为应用程序的后端处理这个问题，一个不错的方法是在我们的 .NET Core 应用程序的 Startup.cs 中使用一个简单的回退处理程序：

public void Configure(IApplicationBuilder app, IHostingEnvironment env, ILoggerFactory loggerFactory)
{
        ....Your configuration
      app.UseMvc(routes =>
      {
        routes.MapRoute(
                  name: "default",
                  template: "{controller=Home}/{action=Index}/{id?}");
      });
      //handle client side routes
      app.Run(async (context) =>
      {
        context.Response.ContentType = "text/html";
        await context.Response.SendFileAsync(Path.Combine(env.WebRootPath, "index.html"));
      });
    }
 }

更多详情：http : //blog.manuelmejiajr.com/2017/10/letting-net-core-handle-client-routes.html

Answer 5

如果您并不真正关心 url 中的散列，您可以在路由器配置文件中将模式设置为散列：mode: 'hash' 无需设置服务器端即可正常工作。

const router = new VueRouter({
    routes: Routes,
    mode: 'hash'
});

哈希模式在 vue 中是默认的，所以即使你留空而不是mode: 'hash'.

Answer 6

这太简单了，你只需要在你的服务器上添加这个配置：

阿帕奇

<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 上：

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

就这样

有关更多信息，请访问此链接