Laravel/Vue-router 无法正确渲染页面

Question

场景

我正在使用

开发一个网络应用程序

• Laravel 5.6.3
• Vue 2.5.7
• VueRouter 3.0.1

设置

我正在使用VueRouterlike

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,
})

还有一个：

<router-view></router-view>

在我的标记中。

问题

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

Answer 1

您可能正在寻找这个https://router.vuejs.org/en/essentials/history-mode.html。

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

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

---

阿帕奇

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