Que dois-je faire si la vue ne saute pas lors de l'utilisation du routeur ?

Dans Vue, le routeur est un outil de gestion de routage couramment utilisé, qui peut facilement réaliser des sauts de page et des commutations dans les applications à page unique (SPA). Mais parfois, il y a un problème selon lequel Vue ne saute pas lors de l'utilisation du routeur. Nous devons accumuler de l'expérience et des compétences pendant le processus de développement pour résoudre ce problème.

1. Vérifiez la configuration du routage

Si Vue ne saute pas lors de l'utilisation du routeur, vous devez d'abord vérifier si la configuration du routage est correcte. Dans Vue, la configuration du routage comprend principalement les aspects suivants :

1. Créer une instance Vue Router

Dans router.js, nous devons créer une instance Vue Router et configurer les informations de routage. Par exemple :

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

const router = new Router({
  mode: 'history',
  routes: [
    {
      path: '/',
      component: Home
    },
    {
      path: '/about',
      component: About
    }
  ]
})

export default router

Dans cet exemple, nous utilisons la méthode Vue.use() pour installer le plug-in Router, puis créons une instance de Router et configurons les informations de routage. Parmi eux, l'attribut routes est utilisé pour définir des règles de routage spécifiques, l'attribut path est utilisé pour spécifier le chemin de routage et l'attribut composant est utilisé pour spécifier le composant correspondant à l'itinéraire.

2. Enregistrer l'instance de routage

Dans App.vue, nous devons enregistrer l'instance Vue Router créée dans l'instance Vue. Par exemple :

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

<script>
import router from './router'

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

Dans cet exemple, nous montons l'instance de routeur créée sur l'instance racine de Vue.

Si la configuration du routage est correcte, nous pouvons essayer de réexécuter le projet pour voir si le routage peut sauter normalement.

2. Comment vérifier le saut d'itinéraire

Si la configuration du routage est correctement vérifiée, vous devez également vérifier la méthode de saut d'itinéraire. Il existe principalement les méthodes suivantes pour acheminer les sauts :

1. Utilisez la balise avec l'attribut to

Dans Vue, Par exemple :

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

Lorsque vous utilisez la balise , vous devez faire attention aux points suivants :

• L'attribut to spécifie le chemin de la route cible, qui peut être une chaîne ou un objet ;
• Si les attributs to et tag sont spécifiés, la balise spécifiée par l'attribut tag sera utilisée pour générer le lien d'ancrage.
• Si les attributs to et replace sont spécifiés en même temps, l'itinéraire ne sera pas enregistré dans le fichier ; l'historique et la fonction de retour de la page peuvent être réalisés ;
• Si les deux sont spécifiés en même temps dans les attributs de classe active, la classe CSS spécifiée sera automatiquement ajoutée à l'élément actuel lorsque la navigation est réussie.

Si la balise est utilisée de manière incorrecte, l'itinéraire risque de ne pas être redirigé. Par exemple, le chemin de la route cible n'est pas spécifié à l'aide de l'attribut to, ou le chemin spécifié est incorrect.

2. Utiliser la navigation programmatique

Dans Vue, nous pouvons également utiliser la navigation programmatique pour réaliser des sauts de page. Par exemple :

this.$router.push('/about')

Lorsque vous utilisez la navigation programmatique, vous devez faire attention aux points suivants :

• La façon d'accéder à la page peut être pousser, remplacer, aller, revenir en arrière, etc. ; est un objet, vous devez spécifier des attributs tels que le chemin, la requête, le hachage et les paramètres dans l'objet pour spécifier le chemin, les paramètres de requête, les fragments de hachage, etc. de la route cible
• Si le chemin de saut est une route nommée ; , vous devez spécifier l'attribut name dans l'objet.
• Si les paramètres transmis lors de l'utilisation de la navigation programmatique sont incorrects, l'itinéraire risque de ne pas sauter.

3. Vérifiez les conditions du saut d'itinéraire

Si la méthode de saut d'itinéraire est correcte, vous devez également vérifier les conditions du saut d'itinéraire. Voici quelques conditions qui peuvent affecter les sauts d'itinéraire :

Gardes d'itinéraire

1. Dans Vue, les gardes d'itinéraire sont un mécanisme utilisé pour contrôler les sauts d'itinéraire. Dans Route Guard, nous pouvons décider d'autoriser ou non les sauts d'itinéraire en fonction de différentes situations. Par exemple :

const router = new VueRouter({
  routes: [...],
})

router.beforeEach((to, from, next) => {
  if (to.meta.requiresAuth) {
    // 判断是否需要登录
    if (sessionStorage.getItem('isLogin')) {
      next()
    } else {
      next('/login')
    }
  } else {
    next()
  }
})

Dans cet exemple, nous utilisons le garde de routage beforeEach pour déterminer si la page nécessite une connexion pour y accéder. Si une connexion est requise et que l'utilisateur actuel n'est pas connecté, il passera à la page de connexion.

Lors de l'utilisation des gardes d'itinéraire, si la valeur de retour est incorrecte, l'itinéraire risque de ne pas être redirigé.

Rendu conditionnel

2. Dans Vue, le rendu conditionnel est un mécanisme utilisé pour contrôler l'affichage et le masquage des éléments de la page. Dans le rendu conditionnel, nous pouvons décider si un élément doit être affiché en fonction de différentes situations. Par exemple :

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

Dans cet exemple, nous utilisons l'instruction v-if pour déterminer si l'utilisateur actuel est connecté. Si vous êtes connecté, un lien « À propos de nous » apparaîtra.

Lors de l'utilisation du rendu conditionnel, si les conditions de jugement sont incorrectes, l'élément peut ne pas s'afficher ou sauter.

4. Résumé

Le problème selon lequel Vue ne saute pas lors de l'utilisation du routeur peut être dû à la configuration du routage, à la méthode de saut, aux conditions de saut et à d'autres raisons. Nous devons examiner attentivement le processus d'utilisation du routage pour trouver le problème. Dans le même temps, nous devons également accumuler plus d'expérience et de compétences dans l'utilisation de Vue Router pour mieux résoudre ces problèmes.

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!