Error 404 encountered while trying to access a website with parameters using Vue.js

Currently, I am in the process of building a website using VueJS and recently discovered how to use url parameters. Everything was working perfectly on my local machine - I could easily navigate to different pages by including parameters in the URL.

For example, I would type localhost:8080 to access the index site and then enter localhost:8080/param1/param2 to visit another page, all without any issues. I even noticed that typing localhost:8080/param1/param2 directly into the browser worked seamlessly as well, no need to first go to the index page.

However, once I built and uploaded the website to my hosting provider, I encountered a problem. I could no longer input the URL with parameters directly; it only worked when navigating from the index page.

An error message popped up:

404 Error

Being relatively inexperienced with routing and web hosting, I tried researching for a solution online but came up empty-handed. Any assistance you could provide would be greatly appreciated.

Additional details based on comments I've received:

About my web host: I have access to Plesk where I can manage my settings. Within the platform, I see "Apache & nginx" settings that appear like this:

Apache Settings

nginx Settings

Answer №1

One reason for this situation is that Single Page Applications (SPAs) do not utilize different HTML pages for various URLs like traditional websites. Therefore, you will need to either direct all requests to the index.html page in your server settings or configure the history property using history: createWebHashHistory().

Please let me know if this solution resolves the issue.

P.S: Unfortunately, I am not familiar with configuring these settings in Apache or Nginx.

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

Choose the Nth option in the dropdown list using programming

Currently, I have a script that dynamically populates a select box with unknown values and quantities of items. I am looking to create another script that mimics the action of selecting the Nth item in that box. Despite my research, I have been unable to ...

Looping through and printing JSON strings

Currently, I am dealing with a JSON string of this specific format: {"prey":["{\"distance\": 8.686924173343307, \"signal\": \"-59\", \"frequency\": 2447, \"mac\": \"00:00:00:00:00:00\", \"ip ...

Prevent any future dates from being entered

My Thoughts: <input type="text" class="datepicker" placeholder="DD/MM/YYYY" id="datepicker" ng-model="datepicker" name="datepicker" style="width:100%" tabindex="4" required/>` Controller: `$('#datepicker').datepicker({ format: &a ...

What is the best way to integrate nano.uuid into a series of promises that are fetching data from the database?

When working with express routing and nano, I encountered a challenge: router.get('/', function (request, response) { db.view('designdoc', 'bydate', { 'descending': true }) .then(results => { // data ...

Declaring a sophisticated array as a property within another property in Typescript

As a newcomer to Angular and Typescript, I am facing a challenge while declaring a property with a complex array as one of its values. Here is what I have attempted: groupedItem: { customGroupId: string, cgName: string, category: [{ cu ...

The attribute 'sandwiches' cannot be found within the data type 'string'

In my app, I require an object that can store strings or an array of strings with a string key. This object will serve as a dynamic configuration and the keys will be defined by the user, so I cannot specify types based on key names. That's why I&apos ...

Using the html5 file reader API in JavaScript to retrieve a file as a binary string and then sending it through an ajax request

I'm attempting to obtain the binary string of files, but I seem to be unable to do so. Why does readAsDataUrl work while readAsBinaryString doesn't? I have posted my code on jsbin and any help would be greatly appreciated. Thank you. Check out ...

Tips on utilizing Ajax for updating the RenderBody() segment

Can anyone help me understand why my Ajax.ActionLink menu item is calling JavaScript twice when I try to use it for the second time? I simply want to update the RenderBody() after clicking on a menu item. _Layout.cshtml: ... <body> <div i ...

Updating state in Redux from a different componentorModifying state

I'm currently learning about redux and I'm facing an issue with accessing the stored state (id) in my components. Specifically, I have a Footer component with a button that is supposed to modify the state in the Layout component. However, I am un ...

Updating ng-model with the values from a property in a collection in AngularJS

Encountering an unusual problem with setting the ng-model for a select drop-down menu. Despite using a property value that matches one in the ng-options, the ng-model consistently ends up as null. Below is the function responsible for fetching orders: o ...

Launching the Node.js application on Heroku resulted in encountering an issue: "Application error - There was a problem within the application

When I access the browser using http://localhost:8080/, I can see the message Hello World with Express. I am currently trying to deploy this application on Heroku. I have followed the tutorial provided by Heroku. 1) Create a new app 2) Choose an App name ...

How can parameters be passed to a JavaScript or jQuery function?

I am currently utilizing a JS/JQ function to convert values into currency by adding commas. Although the function is running smoothly, I am encountering an issue when attempting to pass parameters to it. Kindly provide assistance on how to successfully pas ...

Issue with Vuetable-2 field formatter failing to execute correctly

I've encountered an issue with vuetable-2 where the formatter for my fields isn't functioning properly. Despite setting the formatter for my isCoach field to return Active, the frontend still displays 1. Template <vuetable ref="vuetabl ...

Sending handlebars variable to the client-side JavaScript file

I am currently working on an application using node.js along with express and handlebars, and I'm trying to find a way to transfer handlebars data from the server to client-side JavaScript files. Here is an example: //server.js var person = { na ...

Is there a way to access a component's props within the getServerSideProps() method?

Is there a way to pass parameters to a React component and then access the values of those parameters within the getServerSideProps function of the component? I am utilizing the next framework in React JS. <Menu name={menuName} /> In this example, ...

VueGapi does not perform any actions when attempting to request multiple scopes simultaneously

Here is the Vue3 main.js file that I'm working with: app.use(VueGapi, { apiKey: 'MyApiKey', clientId: 'myClientId.apps.googleusercontent.com', discoveryDocs: ['https://classroom.googleapis.com/$discovery/rest?versi ...

Utilize a global variable in Vue.js

How can I efficiently pass a javascript variable globally to Vue components upon instantiation so that each registered component has it as a property or it can be accessed globally? Please note: I need to ensure that this global variable for vuejs is set ...

Click text when using the Google Tag Manager - gtm.click {{Click Text}}

I have a list of shops with detailed information like opening hours and phone numbers. When a user clicks on the shop's name, I want the relevant details to appear using javascript. I am trying to capture the shop's name (SHOP NAME) when a user ...

Transform Image on Hover in ReactJS

I am working on a Card Component that includes an image and text. Initially, the image is redImage and the text is black. When hovering over the card, I want the redimage to change to whiteimage and the text color to change to white as well. The content ...

Error encountered with nested v-for in Vue.JS causing null and undefined values to be thrown

Question Conclusion: A Vue component I am working on has the following data setup: conversations: null, currentConversation: null, There is a method that runs on mounted() to retrieve the user's conversations: /** * Method to retrieve the user&ap ...