Laravel / Vue-router无法正确呈现页面

Question

方案

我正在使用

开发一个Web应用程序

• Laravel 5.6.3
• Vue 2.5.7
• VueRouter 3.0.1

设置

我正在使用VueRouter喜欢

Vue.use(VueRouter);

import fooPage from './components/pages/fooPage.vue';
import barPage from './components/pages/barPage.vue';
const routes = [
    {
        path: '/foo',
        component: fooPage
    },
    {
        path: '/bar',
        component: barPage,
    }
]

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

使用

const app = new Vue({
    el: '#app',
    router,
})

并且a：

<router-view></router-view>

在我的标记中。

问题

当我在根(/)上执行硬刷新时，我可以在页面之间导航，内容加载正常。但是，当我刷新时，说/foo - 我无法再在不同页面之间正确导航。

Answer 1

您可能正在关注此https://router.vuejs.org/en/essentials/history-mode.html。

根据服务器的配置，您应该按照该网页中的步骤进行操作。

我会复制apache和nginx个，因为它们被广泛使用。

的Apache

<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;
}