Navigating between pages in a multi-page setup using vue.js: A comprehensive guide

I came across a helpful post at this link about implementing multiple pages in Vue.js CLI.

After setting up multiple pages, I was excited to test it out. However, I encountered an issue when trying to access the different pages from the URL http://localhost:8080/. No matter what I tried adding after the URL, it kept displaying the same page.

My vue.config.js configuration is as follows:

module.exports = {
    lintOnSave: false,
    pages: {
        index: {
            entry: './src/pages/Index.js',
            template: './public/index.html',
            filename: 'index.html',
            title: 'Home',
            chunks: [
                'chunk-vendors',
                'chunk-common',
                'index'
            ]
        },
        test: {
            entry: './src/pages/Test.js',
            template: './public/index.html',
            filename: 'test.html',
            title: 'Test Page',
            chunks: [
                'chunk-vendors',
                'chunk-common',
                'test'
            ]
        }
    }
};

Despite reloading the server without any errors, I could not get the different pages to display. It seems like I might have overlooked something crucial during the setup process.

Answer №1

After some investigation, I managed to solve the issue and here is the accurate resolution :

module.exports = {
    lintOnSave: false,
    pages: {
        index: {
            entry: './src/pages/Index.js',
            template: './public/index.html',
            filename: 'index.html',
            title: 'Home',
            chunks: [
                'chunk-vendors',
                'chunk-common',
                'index'
            ]
        },
        sample: {
            entry: './src/pages/Sample.js',
            template: './public/index.html',
            filename: 'sample.html',
            title: 'Sample page',
            chunks: [
                'chunk-vendors',
                'chunk-common',
                'sample'
            ]
        }
    }
};

I mistakenly named pages with identical "filename" values. Furthermore, "chunks" should include the specific page name (as far as I understand), but everything is functioning correctly now!

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

Dealt with and dismissed commitments in a personalized Jasmine Matcher

The Tale: A unique jasmine matcher has been crafted by us, with the ability to perform 2 key tasks: hover over a specified element verify the presence of a tooltip displaying the expected text Execution: toHaveTooltip: function() { return { ...

Utilizing a CSS/HTML div grid to mirror a 2D array in JavaScript

Currently, I am working on a personal project that involves creating a grid of divs in HTML corresponding to a 2D array in JavaScript. However, I am uncertain about the most effective way to accomplish this task. Specifically, what I aim to achieve is tha ...

PHP code in Wordpress incorporating an Ajax request

Does anyone know how to fetch user data as a string using ajax in WordPress? I think I understand the basic concept PHP This code goes in my functions.php file add_action('template_redirect', 'edit_user_concept'); function edit ...

Tips on saving content that changes automatically

I am curious about the best way to store dynamically displayed HTML content. For example, when a certain element is clicked on a website, I want text to appear elsewhere on the page. One idea I had was to create a variable in a JavaScript/jQuery script to ...

A technique for simultaneously replacing two values in a single call to the replace function

Is there a way to replace two or more instances at once with a single replace call? I have not attempted anything yet, as I am unsure of how to proceed. let links = { _init: "https://%s.website.com/get/%s", } Here, you can see that I have a link wi ...

Drawbacks of adjusting design according to screen width via javascript detection

When creating a website, I want it to be compatible with the most common screen resolutions. Here is my proposed method for achieving this: -Develop CSS classes tailored to each screen resolution, specifying properties such as width and position. -Write ...

Submitting late leads to several consecutive submissions

I am working on a jQuery code that aims to introduce a short time delay to allow for the proper execution of an AJAX request: $('#form_id').submit(function(e) { e.preventDefault(); $submit_url = $(this).data('submitUrl'); ...

The TypeScript function was anticipating one argument, however it received two instead

Can you help me fix the issue with my createUser() function? Why am I unable to pass parameters in Smoke.ts? Login.ts : interface User { url: string, email: string, } class Test{ async createUser(user: User) { await Page.setUrl(user.url); aw ...

Leveraging pre-rendered HTML in Vue.js components for both parent and child elements

Currently, I am rendering all the HTML server-side and attempting to use Vue to set this HTML as the $el for two components. According to the lifecycle diagram, this should be possible. There is a parent Vue instance (which binds to #main) that contains a ...

Adding a new column to a table that includes a span element within the td element

I am attempting to add a table column to a table row using the code below: var row2 = $("<tr class='header' />").attr("id", "SiteRow"); row2.append($("<td id='FirstRowSite'><span><img id='Plus' s ...

Does writing JavaScript code that is easier to understand make it run slower?

While browsing the web, I stumbled upon this neat JavaScript program (found on Khan Academy) created by another user: /*vars*/ frameRate(0); var Sz=100; var particles=1000; scale(400/Sz); var points=[[floor(Sz/2),floor(Sz/2),false]]; for(var i=0;i<part ...

Is there a possibility of Typescript expressions `A` existing where the concept of truthiness is not the same as when applying `!!A`?

When working with JavaScript, it is important to note that almost all expressions have a "truthiness" value. This means that if you use an expression in a statement that expects a boolean, it will be evaluated as a boolean equivalent. For example: let a = ...

How can the AngularJS model be updated while using long polling with Ajax?

How can I update the model using ajax long polling method? To start, I will load the default list: For example: - id1 - id2 - id3 Next, I set up an ajax long polling process in the background that runs every 5 seconds. When the ajax call receives an upd ...

Errors are thrown when utilizing hydration with RTK Query

Looking for a solution with my local API and RTK Query, I've encountered an issue when implementing server-side rendering (SSR). Here's the code snippet I'm working with: const api = createApi({ reducerPath: 'data', baseQuery: ...

Is there a way to pre-format a phone number field using jQuery?

Looking to create a phone number text field with a pre-formatted 10-digit structure, like this: |( ) - | allowing users to input numbers and have them fill in automatically: |(804) 479-1832| I came across a helpful script for formatting input d ...

Create a custom BoxGeometry with curved edges using Three.JS

Looking to create a curved BoxGeometry in Three.Js, but unsure of how to achieve it. The end result should resemble the image shown here: enter image description here My current code is as follows, however, it does not produce the desired curved effect. ...

Using Vue: How to utilize v-slot variables in JavaScript

Can the values of the v-slot of a component be accessed in the script? For instance, consider the following template: <cron-core v-model="value" :periods="periods" :format="format" v-slot="{fields, period, error}"> {{period}} <div v-for="fiel ...

Is the video failing due to excessive adjustments of the video's currentTime?

Utilizing both user drag event and keypresses to adjust the position in an HTML5 video element, I am updating the video time with the following line of code: video.currentTime = toTime; Additionally, I am updating a canvas based on the video's posit ...

The dictionary of parameters has an empty entry for the 'wantedids' parameter, which is of a non-nullable type 'System.Int32', in the 'System.Web.Mvc.JsonResult' method

The console is showing me an error stating that the parameters dictionary contains a null entry for parameter wantedids. I am trying to pass checked boxes to my controller using an array, so only the admin can check all boxes of tips for a specific user. T ...

Angularjs $state.go is a powerful tool for navigating through different states

I've been working on setting up a basic navigation system for my single-page application. It consists of a series of links in a list, each linked to a method in a NavigationController. The method then triggers $state.go by passing it a state string. I ...