使用 vue-router 路由靜態頁面

Question

我對 Web 開發還很陌生，我想知道是否有一種方法可以使用vue-router來路由具有自己的樣式表和 javascript 的靜態網頁。

假設我有一個名為staticWebPage的目錄，其中包含：

• index.html文件
• 包含.js文件的javascripts目錄
• 和一個包含.css文件的樣式表目錄

現在，我想將/mystaticwebpage映射到這個index.html文件，以便它顯示那個特定的靜態網頁。

我想做這樣的事情：

import VueRouter from 'vue-router'
import AComponent from './components/AComponent.vue'
import MyHtmlFile from './references/index.html'

router.map({
   '/acomponent': {
      component: AComponent
   },
   'mystaticwebpage': {
       component: MyHtmlFile
   }
})

當然，這不起作用，因為我只能在router.map中引用 Vue 組件。

有沒有辦法使用/staticWebPage目錄中包含的所有.js和.css文件路由到該./staticWebPage/index.html文件？

Answer 1

因此，對於您的情況，您可以做一些使用 Webpack 的代碼拆分功能的事情。

更准確地說，您想要的可能是異步組件。 因此，組件定義中使用的代碼（和 css）（包括您在其中包含的任何腳本）僅在訪問相應頁面時才會加載。

在大型應用程序中，我們可能需要將應用程序分成更小的塊，並且僅在實際需要時從服務器加載組件。 為了使這更容易，Vue 允許您將組件定義為異步解析組件定義的工廠函數。 Vue 只會在組件實際需要渲染時觸發工廠函數，並將結果緩存以備將來重新渲染。

設置可能有點挑戰性，因此請參閱 VueJS 文檔中的 專用指南。