Route static page with vue-router

Question

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:

an index.html file
a javascripts directory containing .js files
and a stylesheets directory containing .css files

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?

Mh, Vue router is a client-side router, so it would probably not result into static pages, by definition. — FitzFish
– FitzFish, Commented May 30, 2017 at 13:57
Do you think there could be a workaround, not using Vue router? I'd just like to put a static page with the same domain name as the one my Vue app is using — Randy
– Randy, Commented May 30, 2017 at 14:03
I think using vue-router is perfectly fine, but that's not a static pages system. — FitzFish
– FitzFish, Commented May 30, 2017 at 14:08
I don't get it.. then it's not fine for what I want to achieve, right? — Randy
– Randy, Commented May 30, 2017 at 14:13
@Randy, I think preprender-spa-plugin is what you need. Check this out vuejs-templates.github.io/webpack/prerender.html — kokjinsam
– kokjinsam, Commented Nov 12, 2017 at 15:50

tony19 · Accepted Answer · 2022-07-16 02:00:23Z

1

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.

edited Jul 16, 2022 at 2:00

tony19

140k24 gold badges281 silver badges354 bronze badges

answered May 30, 2017 at 14:15

FitzFish

8,6193 gold badges33 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

FitzFish Over a year ago

Note that it does not allow you to load html files, of course. But you can includes any html you want in components template.

Collectives™ on Stack Overflow

Route static page with vue-router

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related