VueJS - The application is unable to find the designated route

I've encountered an issue with the Signin page in my project. Despite having all other pages functioning properly, the Signin page doesn't seem to render anything when I navigate to it (http://localhost:8080/#/signin).

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Contatos from '@/components/Contatos'
import NovoContato from '@/components/NovoContato'
import ViewContato from '@/components/ViewContato'
import EditarContato from '@/components/EditarContato'
import Signin from '@/components/Signin'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      path: '/cont',
      name: 'Contatos',
      component: Contatos
    },
    {
      path: '/novo_cont',
      name: 'NovoContato',
      component: NovoContato
    },
    {
      path: '/:contato_id',
      name: 'view-contato',
      component: ViewContato
    },
    {
      path: '/edit/:contato_id',
      name: 'editar-contato',
      component: EditarContato
    },
    {
      path: '/signin',
      name: 'Signin',
      component: Signin
    }
  ]
})

Answer №1

It is due to the configuration of this particular path :

{
  path: '/:contato_id',
  name: 'view-contato',
  component: ViewContato
},

Since this path does not have a specific name, only a parameter, it causes all routes defined after it in the router to not function properly.

To resolve this issue, you can either rearrange the order of the SignIn route so it comes before the ViewContato route, or assign a specific name to the ViewContato route (for example, path: 'view/:contato_id')

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

How can I translate these JQuery functions into vanilla JavaScript?

I am currently in the process of building a configurator using transparent images. The image configurator functions through a basic JQuery function: I have assigned each input element a data attribute called data-Image. This function identifies the data-Im ...

Problem with Ionic App crashing

Currently, I am developing an Ionic app that relies on local storage for offline data storage. The app consists of approximately 30 different templates and can accommodate any number of users. Local storage is primarily used to store three key pieces of i ...

I'm struggling with a namespace conflict in Javascript - how can I access this value in the function call?

Having a bit of trouble figuring out how to obtain the desired value within this function. Any ideas? Thanks! temp = exotics[i].split(','); if ($.inArray(temp[0], tblProbables) != -1) { item = $("<li><a id='" + temp[0] + "&apo ...

Tips for Elevating State with React Router Version 6

Looking for advice on sharing state between two routes in my project. I'm debating whether to lift state up from my AddContact component to either the Layout or App components in order to share it with the ContactList. The Layout component simply disp ...

Executing a Firebase JavaScript script on a remote web server client

I have limited experience with Javascript and I am struggling to get my code to execute. I have already completed the Android java portion, but when I attempt to run the html file, nothing happens. I am unsure if there are bugs in my code or if it needs to ...

Exploring VueJs 3's Composition API with Jest: Testing the emission of input component events

I need help testing the event emitting functionality of a VueJs 3 input component. Below is my current code: TextInput <template> <input v-model="input" /> </template> <script> import { watch } from '@vue/composition-api&ap ...

Angular template not refreshing automatically

Within my controller: $scope.deleteUser = function(user){ $.ajax({ url: "/users/" + user.id.toString(), method: "DELETE", success: function(result){ $scope.users = result["users"]; ...

When using JavaScript, links within the window.location are automatically altered

When using window.location (.assign, .replace, .href) to redirect to a product page on click, I encountered an issue where it automatically changes some of the href links. For example: instead of "previous href= 'commercial/fonts/fonts.min.css' ...

Unusual occurrence in Chrome when checking definitions: ReferenceError: x is not defined

Recently, I've come across some odd behavior in Chrome following its latest update. Whenever I try to determine if a variable is defined, it ends up triggering an uncaught error like the one shown below: if(x) { alert('x is defined.'); } T ...

Is there a way to deactivate the Edge mini menu while selecting text in a React application?

I have recently been working on a React web application and managed to create a specialized text selection menu. However, I am facing a challenge in programmatically disabling the default text selection mini menu in React. The image attached illustrates bo ...

Displaying HTML content fetched from a database in Vue

I am currently developing a blog application that utilizes Vue.js for the frontend and Node.js for the backend. For the content creation part of the blog, I have implemented a rich text editor called vue2-editor on the frontend. The goal is to store this ...

The ancient oracle of Delphi and the modern login portal of Microsoft

I need to login to a site that utilizes . To streamline the process for end-users, I want to store credentials in an .ini file and inject them into a two-stage JavaScript online prompt. Is there a way to have Delphi run a program with a browser that auto ...

The Javascript regex allows for the presence of positive and negative numbers, with the option of a single minus symbol

oninput="this.value = this.value.replace(/[^-0-9.]/g, '') This code snippet is utilized in my current project. However, there seems to be an issue where the input can contain more than one minus sign, as shown here: ---23 To address this p ...

Is it possible to create a functionality in Google Sheets where a cell, when modified, automatically displays the date of the edit next to it? This could be achieved using a Google

Here is the current code snippet I have: function onEdit(e) { var range = e.range; var val = range.getValue(); var row = range.getRow(); var col = range.getColumn(); var shift = 1; var ss = SpreadsheetApp.getActiveSheet().getRange(row, (col+ ...

Chip component in Material UI for Meteor/React not recognizing the onRequestDelete method

I'm currently integrating Material UI's chip element into my application and as per the documentation onRequestDelete - Callback function triggered when the delete icon is clicked. If specified, the delete icon will be displayed. import React f ...

Ways to verify if the inner <div> contains any text

I am attempting to determine if the inner <div> contains the text "Ended" and then remove it if it does. There are multiple <div> elements with the same class. I have attempted to use the .filter() method. My goal is to remove the container_one ...

Await keyword cannot be used due to undefined object reference

Currently in the process of implementing authentication into my node API. Using PassportJS, although I am fairly new to this so please bear with me. The goal is to add a local strategy and verify the user's password during login: // Local Strategy ...

Tips for successfully transferring a JSON object from jQuery to a JavaScript function

Can you help me with accessing data in a JavaScript function after populating it dynamically on an HTML page through an Ajax call? Issue: I am trying to invoke a JavaScript function when clicking on a button after populating the data. However, I am facing ...

Creating a conditional query in Mongoose: A step-by-step guide

The code below functions without any query strings or with just one query string. For example, simply navigating to /characters will display all characters. However, if you specify a query string parameter like /characters?gender=male, it will only show ma ...

Creating a redux store with an object using typescript: A step-by-step guide

Having recently started using Redux and Typescript, I'm encountering an error where the store is refusing to accept the reducer when working with objects. let store = createStore(counter); //error on counter Could this be due to an incorrect type set ...