再次访问网址时,Vue路由器返回404

vue.js Vue.js

前端古一

2020-03-12

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

以下是我的Vue路由器配置

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

第1319篇《再次访问网址时,Vue路由器返回404》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

7个回答
L西门 2020.03.12

如果有人将.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

西里伽罗 2020.03.12

我正在将Razor Pages与.net core 2.2一起使用,并且可以正常工作:

app.UseMvc(routes =>
        {
            routes.MapRoute(
                name: "default",
                template: "{controller}/{action=Index}/{id?}");

            routes.MapRoute(
                name: "spa-fallback",
                template: "{*url:regex(^((?!.css|.map|.js|sockjs).)*$)}",
                defaults: new { controller = "Index", action = "Index" });

        });
乐猪猪 2020.03.12

我认为您错过了SPA不是服务器端渲染的问题。至少对于大多数人来说。因此,当您访问/ anything时,您的网络服务器不会将其重定向到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>

希望它能对某人有所帮助!

理查德Harry 2020.03.12

更妙的是(在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创建的路由重定向回/,而且实际上将网站刷新到相同的路由,因此刷新后您仍处于相同的视图。

伽罗小哥 2020.03.12

对于Netlify,将以下内容添加到public/_redirects文件中...

/*    /index.html   200

参见https://www.netlify.com/docs/redirects/#history-pushstate-and-single-page-apps

小小神奇 2020.03.12

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

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

HarryL梅 2020.03.12

其他人遇到同样的问题,我才意识到

"book/:bookId/read"  // this will not work after page reload

这是不同的

"/book/:bookId/read" // this is what works even after page reload

当然,这是在遵循其他向导提出的建议之后,更重要的是在您的应用服务器端捕获所有路由。我实际上不知道为什么这样做,但是任何有任何想法的人都可以告诉我们。

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android