La page de routage dans vue ne s'affiche pas

Lors du développement avec Vue, nous devons souvent utiliser Vue Router pour implémenter le routage et le saut de pages. Cependant, au cours du processus de développement proprement dit, nous constatons parfois que la page de routage ne peut pas s'afficher normalement, ce qui entraînera certains problèmes dans notre développement. Cet article combinera des cas réels et des solutions pour discuter du problème des pages de routage qui ne sont pas affichées dans Vue.

1. Erreur de configuration de routage

Lors de l'utilisation de Vue Router pour la configuration du routage, cela doit généralement être fait dans le fichier router/index.js. Ce qu'il faut noter ici, c'est que le format de la configuration de routage doit être un tableau et que chaque objet représente une route.

Ce qui suit est un exemple de code pour un simple fichier router/index.js :

import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/components/Home'
import Detail from '@/components/Detail'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home
    },
    {
      path: '/detail/:id',
      name: 'Detail',
      component: Detail
    }
  ]
})

Parmi eux, chaque objet du tableau routes contient trois attributs : chemin, nom et composant. Ces propriétés représentent le chemin, le nom et les composants correspondants de l'itinéraire.

Si la configuration du routage est incorrecte, la page ne sautera pas et ne s'affichera pas correctement. Par exemple, si nous écrivons la valeur de path de manière incorrecte, comme "path" au lieu de "path/", la route ne pourra pas correspondre correctement au composant correspondant et la page ne sera pas affichée.

2. Erreur d'introduction des composants

Lorsque nous effectuons des sauts d'itinéraire, nous devons spécifier les composants correspondants. Si nous écrivons un mauvais nom de composant ou un mauvais chemin dans la configuration de routage, la page ne s'affichera pas correctement.

Voici un exemple :

import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/components/Home'
import Detail from '@/components/Detail'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home
    },
    {
      path: '/detail/:id',
      name: 'Detail',
      component: Detail1
    }
  ]
})

Dans l'exemple ci-dessus, nous avons mal écrit le nom du composant Détail, ce qui a entraîné un mauvais affichage de la page. Nous devons nous assurer que le nom du composant ou le chemin utilisé dans la configuration du routage est correct.

3. Manque de sorties de routage

Même s'il n'y a aucun problème avec notre configuration de routage et l'introduction des composants, parfois la page ne s'affichera pas correctement. Cela peut être dû au fait que la sortie de routage correspondante n'est pas ajoutée dans App.vue.

Ce qui suit est un exemple de code d'un simple fichier App.vue :

<template>
    <div id="app">
        <router-view></router-view>
    </div>
</template>

<script>
export default {
    name: 'App'
}
</script>

<style>
// ...
</style>

Dans l'exemple ci-dessus, nous utilisons le composant ce ne sera pas correct. Afficher la page de routage.

4. Problème de version Vue

Si nous utilisons une ancienne version de Vue, cela peut également empêcher la page de routage de s'afficher correctement. Dans les anciennes versions, certains bugs et problèmes peuvent avoir été corrigés, empêchant le routage de fonctionner correctement.

Pour résoudre ce problème, vous pouvez essayer de passer à la dernière version de Vue. Dans le même temps, nous devons également nous assurer que la version de Vue Router correspond à la version de Vue pour garantir un travail de routage normal.

Résumé :

Ci-dessus sont plusieurs raisons et solutions possibles pour lesquelles la page de routage ne s'affiche pas dans Vue. Dans le processus de développement de Vue, le routage est une fonction relativement importante. Nous devons prendre au sérieux la configuration du routage et l'introduction des composants pour garantir l'exactitude du programme. Si vous rencontrez un problème empêchant l'affichage de l'itinéraire, vous pouvez le dépanner et le résoudre en vérifiant la configuration du routage, l'introduction des composants, l'exportation de l'itinéraire et la version de Vue.

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!