Exploring VueJS Router History Mode with NGinx web server

After conducting research, I discovered several issues similar to the one I am facing.

Currently, I have a docker-compose setup on Digital Ocean with NGinx, VueJS, and a Static Landing Page.

Everything was working fine until I added a new route with a form. This route will be accessed via a link sent through email to customers with an ID for identification.

Here is the structure example:

-> landing page

-> my VueJS application

-> my router in VueJS

VueJS Configuration:

(VueJS configuration code snippet here)

VueJS Router Configuration:

(VueJS router configuration code snippet here)

NGinx Configuration:

(NGinx configuration code snippet here)

Although I have followed various documentation and Stack Overflow posts, none of them seem to resolve the issue.

Essentially, when clicking the link , the site redirects to /quiz/index.html as defined in the location /quiz configuration:

location /quiz {
            alias /var/www/html/quiz;
            expires -1;
            add_header Pragma "no-cache";
            add_header Cache-Control "no-store, no-cache, must-revalidate, post-check=0, pre-check=0";
            try_files $uri $uri/ /quiz/index.html;
        }

If you have any insights on how to resolve this issue, please let me know. Your assistance is greatly appreciated.

Answer №1

To properly utilize nested routes in Vue.js, it is essential to exclude the slash '/' in the children's path.

Your vue-router configuration should resemble this:

const routes = [
    {
        path: '/:lang',
        component: {
            template: '<router-view></router-view>',
        },
        beforeEnter: Trans.routeMiddleware,
        children: [
            {

                path: '',
                name: ROUTER_NAME.QUIZ,
                component: Quiz
            }, {
                path: 'results',
                name: ROUTER_NAME.QUIZ_RESULTS,
                component: QuizResults
            }, {
                path: 'success',
                name: ROUTER_NAME.QUIZ_SUCCESS,
                component: QuizSuccess
            }
        ]
    },
    {
        path: '/confirmation/:quizId',
        name: ROUTER_NAME.QUIZ_CONFIRMATION,
        component: QuizConfirmation,
        props: true
    },
    {
        // Redirect user to supported lang version.
        path: '*',
        redirect(to) {
            return Trans.defaultLanguage
        }
    }
]

For further information on nested routes with vue-router, refer to the official documentation Here.

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

Ionic 5 plugin not loading correctly on iOS devices

After installing the TextToSpeech Cordova Plugin on my Ionic App: "@ionic-native/text-to-speech": "^5.30.0", "cordova-plugin-tts": "^0.2.3", I incorporated it into my Vue file: import { Plugins } from "@capacit ...

Using InputAdornment with MUI AutoComplete causes the options list to disappear

I created a custom AutoComplete component with the following structure: <Autocomplete freeSolo size="small" id="filter-locks-autocomplete" options={json_list ? json_list : []} groupBy={(option) => option.lock.building} ...

Node-red occasionally crashes and the JSON output may unexpectedly return HTML content

Having some trouble with my node-red crashing several times a day. I suspect that one of the issues may be related to an http request I am making. I'm trying to retrieve JSON data from a webpage, but sometimes I encounter errors in the log indicating ...

Encountering a Dockercompose issue when attempting to initiate npm start for my React application

I have dockerized my React/Django app and set up the necessary Docker files and Docker Compose configurations. When I run "docker-compose up", my database and backend are working fine, but I am encountering an error in React (「wds」: Content not from we ...

utilize the useRef hook to display the total number of characters within a text area

Introducing the following component: import React from 'react'; export interface TexareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> { maxLength?: number; id: string; } export const Textarea = React.forwardRef( ( ...

Plotting only the initial and final point on Google Maps using API

I am currently working on a tracking application that utilizes the Geolocation and Google Maps API. The app is set up to track the user's position using the watchPosition() function. As of now, a new blue icon is displayed every time a new longitude a ...

Re-rendering Vue 2 component when dynamically changing the component within it

I am facing an issue with my main component that imports two other components: admin page login page Within the main component, I have the following setup: <template> <div id="app"> <component v-bind:is="currentView"></compon ...

Show labels for data on a circular graph using angular-chart.js

I recently created a pie chart using angular-chart.js and it's functioning smoothly. However, I'm facing an issue with displaying the data value on each section of the pie chart. My attempt to use Chart.PieceLabel.js by adding the code snippet b ...

When a new entry is added to the database, automatically refresh a <div> section within an HTML document

I have a basic webpage that showcases various products stored in the database. My goal is to implement an updater feature where, if a user adds a new product, the page will automatically display the latest addition in a specific div. I attempted to refere ...

What are the steps to resolve a peer dependency problem with npm?

I am facing a conflict in my package.json file with the following modules: react-router requires react 0.13.x redbox-react requires react@>=0.13.2 || ^0.14.0-rc1 After running npm install react, I ended up with version <a href="/cdn-cgi/l/emai ...

Printing from a Windows computer may sometimes result in a blank page

Looking to incorporate a print button into an HTML page, I'm facing an issue. The majority of the content on the page should not be included in the printed version, so my approach involves hiding everything in print and then showing only the designate ...

Getting an error message of 'Unable to locate Firebase Storage Default Bucket on the server?

I'm currently facing an issue with the server not being able to locate the bucket. To troubleshoot, I've stored the token and other crucial details in a separate file as a string. Afterwards, I split it and utilize the relevant text in my Javascr ...

Struggling to send the correct cookies to the API server using Next.js

I have set up an API express server on api.mydomain.com and a Next.js website on mydomain.com. My Next.js application uses getServerSideProps to request data from the API for displaying on the page. However, I am facing an issue where I can set cookies for ...

Is there a way to modify the Java class name to consist of two separate words?

(Edited) I am completely new to android app development. My question is: How can I rename a java class with two words instead of one? My main menu consists of 3 options, each linked to a java class: public class Menu extends ListActivity{ String cla ...

working with received data from a JavaScript object

Looking for code assistance, I have a data object serving as my data source. var data = [ { "label":"May 7", "value":25736.6, "proID":"ISB" }, // more data objects... ]; I'm manipulating this data to generate another ...

Guide on dynamically changing the color of polymer 1.0 paper-button from an array of colors

I have an array called buttonColors that contains a set of colors in hex format. I am looking to create paper-buttons, each with the color from the buttonColors array. How can I achieve this in Polymer 1.0? <template is="dom-repeat" items="{{buttonCo ...

Images stored locally are not appearing in React JS applications

I'm currently exploring React JS and Material UI to develop a dynamic web application. I'm attempting to link a local image using 'url(${process.env.PUBLIC_URL})' but unfortunately, the image is not showing up for some unknown reason. ...

What is the best method for serving cross-site content - JSONP, iframe, or a different approach?

In the process of developing an ad network, I am faced with the task of integrating third-party websites to include my JavaScript and replace specific divs with my content. Choosing which content to serve dynamically into these divs necessitates a cross-s ...

Condition formulation using dynamic dust JS equality

I'm struggling with a seemingly simple task - dynamically changing the @eq condition. The example provided shows a default render, but what I really need is to allow user input to change it to either "Larry" or "Moe". You can view my code on jsfiddle ...

Retrieve information from the input field and then, upon clicking the submit button, display the data in the

When a user inputs their name, email, subject, text, and telephone number, I want to send an email with that data. The email will be sent to a specific email address, such as [email protected]. This process is crucial for a hotel website, where the em ...