Maison  >  Article  >  interface Web  >  Comment résoudre le problème « Erreur : « xxx » n'est pas une route enregistrée. » lors de l'utilisation de vue-router dans une application Vue ?

Comment résoudre le problème « Erreur : « xxx » n'est pas une route enregistrée. » lors de l'utilisation de vue-router dans une application Vue ?

PHPz
PHPzoriginal
2023-06-24 14:35:591335parcourir

Vue.js est un framework JavaScript léger qui fournit un ensemble complet d'outils de développement pour créer des interfaces utilisateur interactives et efficaces. Vue Router est le plug-in officiel de gestion de routage de Vue.js, qui peut être utilisé pour créer des applications monopage (SPA) et implémenter un contrôle de routage côté client. Cependant, lors de l'utilisation de Vue Router, le message d'erreur « Erreur : xxx n'est pas une route enregistrée » apparaît parfois. Alors, comment le résoudre ?

1. Vérifiez la configuration du routage

Lorsque vous utilisez Vue Router, le routage doit d'abord être configuré. Dans le fichier d'entrée de l'application, la méthode Vue.use() est généralement utilisée pour installer le plug-in Vue Router et définir les éléments de configuration du routage. Par exemple :

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from './views/Home.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'home',
    component: Home
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

Si le message d'erreur « Erreur : xxx n'est pas une route enregistrée » apparaît, vérifiez d'abord si la route existe dans l'élément de configuration de routage. Par exemple, si le message d'erreur « Erreur : à propos de n'est pas une route enregistrée » apparaît, vous devez vérifier si la route nommée « à propos » est définie dans l'élément de configuration de routage.

2. Vérifiez les liens de navigation

Dans les applications Vue, le composant b988a8fd72e5e0e42afffd18f951b277 Par exemple :

<router-link to="/about">关于我们</router-link>

Si le message d'erreur "Erreur : xxx n'est pas un itinéraire enregistré" apparaît lors de l'utilisation du lien de navigation, vous devez vérifier si l'attribut to dans le lien de navigation est correct et s'il est cohérent avec l'élément de configuration de routage. Correspond au chemin défini.

3. Vérifiez la logique de saut d'itinéraire

Dans Vue Router, vous pouvez sauter des itinéraires via la navigation programmatique. Par exemple : $router.push('/about'). Si le message d'erreur « Erreur : xxx n'est pas un itinéraire enregistré » apparaît lors de l'exécution d'un saut d'itinéraire, vous devez vérifier si le chemin de saut existe dans l'élément de configuration de routage.

4. Vérifiez le routage nommé

Vue Router prend en charge le routage nommé Vous pouvez définir un nom pour l'itinéraire dans l'élément de configuration du routage pour une utilisation facile lors des sauts d'itinéraire. Par exemple :

{
  path: '/about',
  name: 'about',
  component: About
}

Si le message d'erreur « Erreur : xxx n'est pas un itinéraire enregistré » apparaît lorsque vous utilisez un itinéraire nommé pour sauter, vous devez vérifier si l'itinéraire nommé est correct et s'il correspond au nom de l'itinéraire défini.

Résumé

Le message d'erreur « Erreur : xxx n'est pas un itinéraire enregistré » est généralement dû à une configuration de routage incorrecte ou à un chemin de saut incorrect. Lorsque vous utilisez Vue Router, vous devez vérifier soigneusement la configuration du routage, les liens de navigation et la logique de saut de routage pour vous assurer que le routage fonctionne correctement.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn