Маршрутизатор Vue возвращает 404 при повторном посещении url-адреса

Я просто включаю режим истории маршрутизатора Vue. И он отлично работает, когда я посещаю маршрутизацию vue через v-href или href. Но, когда я пытаюсь обновить эту страницу или перейти непосредственно из адресной строки браузера, он просто вернет ошибку 404. Есть ли возможность принять обновление / вернуться к этому url-адресу?

следующий настройки маршрутизатора вю

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

4 ответов

обновляя страницу, Вы делаете запрос на сервер с текущим url-адресом, и сервер возвращает 404. Вы должны справиться с этим на уровне веб-платформы или веб-сервера.

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

13

Я думаю, вам не хватает, что SPA не является рендерингом на стороне сервера. По крайней мере, для большинства. Таким образом, когда вы получаете доступ /что-либо, ваш веб-сервер не перенаправляет его на индекс.формат html. Однако, если вы нажмете на любую ссылку маршрутизатора vuejs, она будет работать из-за того, что javascript попал в действие, но не на стороне сервера.

чтобы решить эту проблему, используйте .htaccess и перенаправить все запросы на индексацию.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>

надеюсь, это поможет кому-то!

5

Если кто-то имеет дело с этой проблемой в .NET Core в качестве бэкэнда приложения, хороший подход-простой резервный обработчик при запуске.cs нашего приложения .NET Core:

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

1

для кого-то, кто видит это, используя Экспресс-сервер, есть промежуточное ПО connect-history-api-резервный что реализуется такой 

const express = require('express');
const history = require('connect-history-api-fallback');

const app = express(); 
app.use(history({
  index: '/' //whatever your home/index path is default is /index.html
}));

или с собственным узлом 

const http = require('http')
const fs = require('fs')
const httpPort = 80

http.createServer((req, res) => {
  fs.readFile('index.htm', 'utf-8', (err, content) => {
    if (err) {
      console.log('We cannot open "index.htm" file.')
    }

    res.writeHead(200, {
      'Content-Type': 'text/html; charset=utf-8'
    })

    res.end(content)
  })
}).listen(httpPort, () => {
  console.log('Server listening on: http://localhost:%s', httpPort)
})

оба предложения в разделе документация.

0