Issue with Vue router: history mode fails to work on the second level

I recently added a second router to my Vue.js project, specifically for a dashboard on my website. However, I encountered an issue where if I manually tried to access a specific route like "/admin/contact" or refreshed the page, I would receive a 404 error and the content wouldn't load.

import Vue from 'vue'
import Router from 'vue-router'
import Index from "@/views/Admin/Index.vue";
import ContactIndex from "@/views/Admin/Contact/Index.vue";

Vue.use(Router)

const router = new Router({
    mode: "history",
    routes: [{
            path: '/admin',
            name: 'admin',
            component: Index,
            meta: {
                requireAuth: true
            }
        },
        {
            path: '/admin/contact',
            name: 'contact',
            component: ContactIndex,
            meta: {
                requireAuth: true
            }
        }
    ]
})
export default router;

The strange thing is that when I click on a router-link tag that points to the same address ("/admin/contact"), everything works perfectly fine. How can I resolve this issue?

javascriptvue.jsvuejs2vue-router

Answer №1

When working in a development environment and using webpack-dev-server to run your application, make sure to include historyApiFallback: true in the devServer property of your webpack configuration file.

Answer №2

If you're experiencing a lack of content on your screen and in the console, it's likely that there are some issues with your server configuration (https://router.vuejs.org/guide/essentials/history-mode.html#example-server-configurations).

To troubleshoot this issue, consider adding a route to catch all paths. The following route can be added to your list of routes:

{
  path: '*',
  component: function(resolve) {
    require(['path/to/NotFoundComponent.vue'], resolve);
  }
}

By implementing this route, any URL will load the specified component which can help pinpoint any errors or oversights.

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

Encountered a 'node:internal/modules/cjs/loader:1146' error while setting up a React application

Encountering these console errors node:internal/modules/cjs/loader:1146 throw err; ^ Error: Module '../../package.json' not found Require stack: - C:\Users\adity\AppData\Roaming\npm\node_modules\npm\li ...

javascriptreactjsnode.jstypescriptfrontend

What is the best way to adjust image size based on different screen sizes while ensuring the buttons at the top remain responsive

How can I make the image and image select and delete buttons responsive? I am looking to eliminate the gap after the delete button. Any suggestions are welcomed. <div class="container mt-0"> <div class="row"> ...

javascripthtmlcsstwitter-bootstrap

Tips for optimizing CSS, Laravel version 10 and Vite.js

Currently, I am utilizing Vite, Vue.js, and Laravel version 10. As I embark on creating my initial application within this framework, I am determined to optimize my code for Google Page Speed. While I have overcome numerous hurdles along the way, one chall ...

vue.jsvitelaravel-10

Encountering a compilation error when implementing ActionReducerMap in combination with StoreModule.forFeature

In my Angular project, the structure is organized as follows: /(root or repo folder) |_ projects |_ mylib (main library to be exported from the repo) |_ sample-app (created for testing 'mylib' project in other projects) To manage appli ...

javascriptangulartypescriptngrxangular8

Exploring Angular's JavaScript Find Function

Here is a snippet of the code I've been working on: var myApp = angular.module('myApp',[]); //myApp.directive('myDirective', function() {}); //myApp.factory('myService', function() {}); myApp.controller('MyCtrl ...

javascriptangularjsfind

The "Next" button fails to function after a replay has been completed

I created a small quiz app to practice my JS skills. Everything seems to be working fine, except for one issue - when I click on replay, the quiz box shows up but the 'Next' button stops functioning. There are no console errors and I'm strug ...

javascriptbootstrap-4

Newly developed Node.js code to comply with the EcmaScript 2015 standards

As of April 26, 2016 or later, with the release of Node.js 6+, there is a 96% compatibility with EcmaScript 2015. You can check out more information on Node.js EcmaScript 2015 support here. Is using Babel still the most effective way to bridge that remain ...

javascriptnode.jsecmascript-6

JavaScript's ability to pinpoint individual hits stands out as a distinguishing feature

Is there a creative approach to identifying a distinct user using JavaScript, such as generating a hash to transmit to the server-side? EDIT: The challenge is that I am unable to access the browser directly (e.g. set cookies). Additionally, relying on IPs ...

javascriptuniquehit

How should I position <script> tags when transferring PHP variables to JavaScript?

I've attempted to find an answer without success due to its specificity. Within the header.php file, which serves as the header of the website, various scripts are included to enable jQuery functionality. Additionally, there is a file called workscri ...

javascriptphpjquery

No active Pinia was found when calling getActivePinia in Vue

I encountered an error message saying: Uncaught Error: [ ...

vue.jsvue-routerpinia

Creating a vertical slider with an unordered list

Looking to create a vertical menu with a fixed height that smoothly slides up and down when the arrow buttons are clicked. I'm struggling to figure out how to properly use offsets to determine where to navigate to. Right now, I am using the relative ...

javascriptjqueryhtmlcss

Issues with tabs functionality in Bootstrap version 4.3.1, unlike the smooth operation in v4.1.0

I encountered an interesting situation recently. After spending almost 3 hours troubleshooting my code, I discovered that it functions perfectly on Bootstrap v4.1.0 but fails on the latest version, v4.3.1. Working JSFiddle with Bootstrap v4.1.0: https://j ...

javascriptjquerycsstwitter-bootstrapbootstrap-4

Loading an Angular app causes Chrome devtools to freeze

Currently, I am facing some unusual behavior in my rather large Angular (1.5) application. When I have Chrome DevTools open while loading the app, the CPU usage of that particular tab shoots up to 100%, causing the app to take a minute or more to load. Add ...

javascriptangularjsgoogle-chrome

What is the process for making changes to a document in Mongoose?

My goal is to allow users to update existing mongoose documents using a form with method-override package. Despite trying various solutions found on Stackoverflow, I have not been able to resolve my issue. The desired functionality is for the user to view ...

javascriptmongodbexpressmongoose

Remove any elements using jQuery that do not contain any content

I need to remove any empty elements from my HTML code. Here is an example of the HTML markup: The HTML markup is stored in a jQuery variable called 'myhtml' and it may contain various tags. <h1> <u> <strong></st ...

javascriptjquery

GraphQL Shield throws an 'Unauthorized' error for a permitted mutation

I've been working on setting up a GraphQL API with apollo-server-express, and I'm trying to handle permissions using graphql-shield middleware. However, I'm running into some issues when it comes to allowing mutations to be executed. My aim ...

javascriptnode.jsexpressgraphqlapollo-server

Guide to activating the 'Next' button on WP Forms using JavaScript code when certain conditions are fulfilled

Is there a way to adjust the JavaScript code provided so that the visibility of the "Next" button is dependent on whether at least one item in the 'wpforms-icon-choices-item' class has the '.wpform-selected' class on the current page or ...

javascripthtmlcsswordpresswpforms

How can I calculate the total sum of values in an array retrieved from an API call?

Within the array this.state.companiesIncome, I've got 50 objects each containing a {value and date}. However, when attempting to retrieve this.state.companiesIncome[2].value, I'm encountering an error stating: TypeError: Cannot read property &apo ...

javascriptreactjs

Utilizing Vue.js: Dynamically linking v-model to route parameters depending on the current state

I'm currently in the process of developing an application that will serve as the backbone for a restaurant chain's website. The main functionality involves allowing users to modify page content and images. Given the complexity of the site with it ...

javascriptvue.jsvuexvue-routerv-model

Troubleshooting: Why isn't my Vue v-for list updating when using v

I have a basic application that retrieves data from an API and displays the array on the screen using a v-for loop. The array is structured like this items : [{id : 1, quantity: 2}, {id: 2, quantity: 3} ...] The loop is set up like this <div v-for=&qu ...

javascriptvue.js