Unexpected Website Homepage (Vue / Javascript)

I am looking to display a different .vue file each time a visitor refreshes the Home page.

Currently, I only have one page called Home.vue. I am attempting to randomly load either Home1.vue or Home2.vue with each refresh.

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

Perhaps I can have a single "homepage" but the entire content/template can be loaded randomly.

Is there anyone who can help me achieve this?

Answer №1

Using the import function with a specific path as a string can be beneficial for your project.

const sections = ['section1.vue', 'section2.vue', 'section3.vue']
import(`./components/${sections[Math.floor(Math.random()*sections.length)]}`)

Best of luck with your coding!

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is this conditional statement accurate?

Could this be a legitimate condition? Why isn't it functioning as expected in PHP? var myString = 'hello'; if(myString == ('hello' || 'hi' || 'bonjour' || 'hallo')){ alert('Welcome'); } ...

Find items where a certain value matches any of the values in another array and return them

I'm seeking assistance with a specific task. I have an object structured as shown below: SOMEKEY: { "key1": val1, "key2": val2 } Additionally, I have an array that contains string values like this: [stringA, stringB, stringC ...

Manipulating a 2D array in Javascript and Jquery: Implementing push functionality

I am trying to set up an array structure as follows: track[divID][wrapID] However, when I attempted track[divID][wrapID] = wrapID, I encountered an issue. This is because I need to add more elements to the second dimension in another loop, like this: tr ...

Add an array into an object using $set (properties remain unchanged)

I have an object with the following structure: obj: { 1: { 'a': [ [] ], 'b': [ [] ] } } Now, I am attempting to append 'c' => [ [] ] to this object in a watcher. My first attempt was using this.obj[1][&apo ...

I am currently developing a program that is displaying a blank page despite my efforts to write

I've been trying to write the code below but it only shows a blank page. var greeting = React.createClass({ render: function() { return ( <div> <h1>Hello</h1> </div> ...

Master the art of positioning in three.js framework

I am a beginner in javascript and three.js, and I am currently exploring how to determine the 3d positions on a webpage. For instance, I want to place a point light at the coordinates (50,20,10) in x, y, z values. How can I determine where these x, y, z va ...

Exploring the World of Vue.js Object Imports

I am currently encountering an issue involving the importing of Objects from App.vue into a component. To provide context, this project consists of a Navigation Drawer component and an App.vue file. The Navigation Drawer contains Vue props that can be dyna ...

What is the best way to reach the end of a countdown and hit 0

Is there a way to complete the countdown to 0 second? Once the countdown is finished, it will display 00days00hours00minutes01seconds I would like it to show 0 seconds like this 00days00hours00minutes00seconds. Is there a method to achieve this? Explore ...

Toggle the visibility of items based on the user's login status

Below is the code snippet for when the user is logged out: <div class="fusion-secondary-main-menu"> <div class="fusion-row"> <?php avada_main_menu(); ?> <?php avada_mobile_menu_search( ...

Refresh TR when clicked

I have a HTML table that lists items from SQL, using <tr> and <td>. The table is housed within a div that is refreshed every 30 seconds with jQuery AJAX (hence the unique id on the div). Here is the HTML code: function auto_load() { $.aj ...

Can someone assist me in creating a basic query for MongoDB that is similar to the SQL query "select speed from values"?

I'm struggling to come up with a simple MongoDB query (similar to the SQL equivalent: "select speed from values"). I've been searching for a solution but can't seem to find one. My setup involves a Node.js backend for Vue.js. // Here is a s ...

Problem with Gulp-Watch Functionality on Windows 7 - Node.js, NPM, and Gulp All Up and Running Fine

As someone who is new to the world of Node.js, NPM, and other modern tools designed to improve productivity and workflow, I find myself faced with some challenges. Below are the specifications: Node version - v8.10.0 Gulp CLI version - 2.0.1 Gulp Loca ...

Tips for effectively utilizing npm-check

Recently, I've been delving into the world of node.js and experimenting with the Spotify API to enhance my knowledge. After starting off with some example source code provided by Spotify, I now feel ready to create something unique on my own. With a ...

Creating registration and login forms using an express server

Currently, I'm in the process of creating a basic website on my localhost that incorporates a signup form along with other essential HTML elements. The setup for the signup procedure went smoothly as planned. When a user completes the form and submits ...

Deciphering occurrences in highcharts

When drawing a rectangle in highcharts using the selection event, I am able to retrieve the coordinates of the box by translating the axis values of the chart like this: chart.xAxis[0].translate((event.xAxis[0]||chart.xAxis[0]).min) Now, my query is how ...

Having issues with the onSubmit event not being triggered for a react + material-ui form

I am currently using the mui box react component with the form set to the component property and an onSubmit attribute pointing to the submit handler I want to invoke. There is a submit button located at the bottom of the form. However, every time I click ...

Enhancing Headless UI tabs with Tailwind transitions: A step-by-step guide

Can transitions be used with headlessui tabs? I am currently utilizing @headlessui/vue <template> <TabGroup> <TabList> <Tab>Tab 1</Tab> <Tab>Tab 2</Tab> <Tab>Tab 3</Tab> < ...

I keep encountering a 'Missing Permissions' issue whenever I attempt to execute the ban command in Discord.js. What could be causing this problem?

While working on coding a ban command for my Discord server, I encountered an issue where the command was not working as expected. Upon testing, I received an error message on the console stating DiscordAPIError[50013]: Missing Permissions. This was puzzli ...

A cutting-edge JQuery UI slider brought to life using HTML5's data-* attributes and CSS class styling

I've been attempting to create multiple sliders using a shared CSS class and HTML5 data attributes, but unfortunately, I haven't had much success so far. Although I am able to retrieve some values, there are certain ones that simply aren't w ...

Having trouble getting datatables.net to function properly with JavaScript

I've been experimenting with datatables from http://datatables.net/ Attempting to make it work using javascript, but I'm facing issues. Even when following the example provided on the website, it still shows a blank page. Does anyone have any su ...