使用vue-router

Question

我对网络开发还不熟悉，我想知道是否有办法使用vue-router路由带有自己的样式表和javascripts的静态网页。

假设我有一个名为 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/index.html目录中包含的所有.js和.css文件路由到/staticWebPage文件？

Answer 1

因此，对于您的情况，您可以使用Webpack的代码分割功能。

更准确地说，您想要的可能是异步组件。因此，只有在访问相应的页面时，才会加载组件定义中使用的代码（和css）（包括那里包含的任何脚本）。

  

在大型应用程序中，我们可能需要将应用程序划分为更小的应用程序   块实际上只从服务器加载一个组件   需要。为了使这更容易，Vue允许您定义组件   作为异步解析组件的工厂函数   定义。 Vue只会在启动时触发工厂功能   实际上需要渲染组件并将结果缓存   未来的重新渲染。

设置可能有点挑战，因此请参阅VueJS文档中的dedicated guide。