Random Landing Page (Vue / Javascript)

I would like to show a different .vue file when the visitor refreshes the Home page.

Right now I have one page called Home.vue I’m trying to load Home1.vue Home2.vue randomly on every refresh.

{
  path: '/',
  name: 'home',
  component: () => import('./views/Home.vue')
},

Maybe I have have one “homepage” but the whole content/template can be loaded randomly.

Can someone figure out how to archive this?

Answer

import function takes the path as the string may this will help you

const pages = ['home.vue', 'about.vue', 'third.vue']
import(`./views/${pages[Math.floor(Math.random()*pages.length)]}`)

Good luck!