2016-04-04 2 views
3

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

Следующая моя Vue конфигурации маршрутизатора

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

ответ

9

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

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

+0

Вы правы. Я должен работать со своим веб-фреймворком или уровнем веб-сервера. Я постараюсь проверить это. благодаря –

2

Я думаю, что вам не хватает, что SPA не рендеринга на стороне сервера. По крайней мере, для большинства. Таким образом, когда вы получаете доступ/что-либо, ваш веб-сервер не перенаправляет его на index.html. Однако, если вы нажмете на любую ссылку vuejs router, она будет работать из-за того, что 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> 

Надеется, что это помогает кто-то!

1

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

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

Смежные вопросы