CODEWITHSUNDEEP
webvue.jsvue-router
Randy
Randy

Reputation: 4525

Route static page with vue-router

I'm fairly new to web development and I was wondering if there was a way to route a static web page with its own stylesheets and javascripts, using vue-router.

Let's say I have a directory called staticWebPage that contains:

Now, I'd like to map /mystaticwebpage to this index.html file so it displays that particular static web page.

I'd like to do something like this:

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

Of course, this doesn't work as I can only reference Vue components in router.map.

Is there a way to route to that ./staticWebPage/index.html file using all the .js and .css file contained in the /staticWebPage directory?

Upvotes: 4

Views: 6109

Answers (1)

FitzFish
FitzFish

Reputation: 8629

So for your case you can do something that uses Webpack’s code-splitting feature.

More precisely, what you want is probably async components. So the code (and the css) used in the component definition (including any script you included there) will be loaded only when the corresponding page is accessed.

In large applications, we may need to divide the app into smaller chunks and only load a component from the server when it’s actually needed. To make that easier, Vue allows you to define your component as a factory function that asynchronously resolves your component definition. Vue will only trigger the factory function when the component actually needs to be rendered and will cache the result for future re-renders.

It can be a bit challenging to setup, so please refer to the dedicated guide in the VueJS doc.

Upvotes: 1

Related Questions