帶有vue-router的中間人在頁面重載時加載“找不到頁面”

Question

我正在建立一個網站，該網站在后端使用Middleman（Ruby），在前端使用VueJS，並使用vue-router來處理路由。 在我的vue-router索引中，我正在/ chapter /：id上加載Video組件，如下所示：

const routes = [
  {
    name: 'chapter',
    path: '/chapter/:id',
    component: Video,
    props: true
  },
]

單擊<router-link>時，一切都按預期方式工作-但是，當您重新加載頁面（例如：/ chapter / 2）時，它將從Middleman加載“找不到文件”。

Middleman中是否有某些功能可以禁用路由？

任何幫助將不勝感激！ 謝謝

Answer 1

將您的后端配置為在請求的地址為chapter/:id時返回index.html ，或者在其不是后端api列表中的地址時返回。

當我們使用通過vue構建的單頁應用程序時，我們總是在index.html ，該應用程序一直運行着app.js或其他內容，並且當路由更改時，腳本會檢測到該情況並更改頁面內容，我們從未離開過index.html 。 因此，當我們重新加載頁面時，瀏覽器從服務器請求一個文檔/ html，當html內含js腳本到達時，該腳本運行，確定由於地址/路線而顯示的內容，然后我們就開始了精細。

因此，在您的情況下，只需修復“確保訪問/chapter/:id時瀏覽器獲取html文件”部分。