Comment utiliser les modèles et les hooks Vue-Router (tutoriel détaillé)

Cet article présente principalement l'utilisation du mode Vue-Router et des hooks. Maintenant, je le partage avec vous et le donne comme référence.

L'article précédent traitait principalement de l'utilisation de base de vuer-router, dont on peut dire qu'il résout le problème de la nourriture et des vêtements. Maintenant, prenons le thé de l'après-midi

Mode<.>

Les options de mode dans vue-router sont principalement définies lorsque le routeur est instancié, comme suit

const router = new VueRouter({
　　　mode: 'history', // 两种类型history 还有 hash
   routes: routes // 可以缩写成routes
})

Il y a deux modes parmi lesquels choisir, historique et hachage, pour un aperçu comparaison,

模式	优点	缺点
hash	使用简单、无需后台支持	在url中以hash形式存在，不会传到后台
history	地址明确，便于理解和后台处理	需要后台配合

Le mode de hachage est une URL vers le backend, car la valeur de hachage dans l'adresse ne sera pas transmise au backend, le serveur n'a donc qu'à faire un mappage de l'adresse racine.

L'itinéraire final du mode historique est reflété dans le nom de chemin de l'URL. Cette partie sera transmise au serveur, le serveur doit donc mapper chaque valeur de chemin possible en conséquence. Ou utilisez la correspondance floue pour le mappage.

De plus, en mode historique, si le backend n'effectue pas un mappage un-à-un, mais une correspondance floue, alors vous devez faire attention à la situation 404. À ce stade, vous devez définir la page 404 dans le routeur frontal.

Définition de l'itinéraire 404

Étant donné que le routeur lui-même est adapté de haut en bas, si un itinéraire correspondant est trouvé plus tôt, il sautera. Par conséquent, vous pouvez directement ajouter la route 404 à la fin, comme suit

let routerConfig = [{
  path: '/pages',
  component: App,
  children: [{
    path: 'demo/step1/list',
    component: coupon,
    name: 'coupon-list',
    meta: {
      title: '红包'
    }
  }]
}, {
  path: '*',
  component: NotFound,
  name: 'notfound',
  meta: {
    title: '404-页面丢了'
  }
}]

Lorsque la correspondance précédente est introuvable, * représente tout, ce qui signifie qu'ils pointent tous vers la page 404

Hook de routage

Les hooks de routage sont principalement définis pour que les utilisateurs effectuent un traitement spécial lors des changements de routage, putain. . Quelle bouchée.

De manière générale, Vue propose trois principaux types de hooks

1 Hooks globaux

2 Hooks exclusifs à un certain itinéraire
3. crochets de composants

Hooks globaux

Comme leur nom l'indique, les hooks globaux sont utilisés globalement et sont utilisés comme suit

const router = new VueRouter({
  mode: 'history',
  base: __dirname,
  routes: routerConfig
})

router.beforeEach((to, from, next) => {
  document.title = to.meta.title || 'demo'
  if (!to.query.url && from.query.url) {
    to.query.url = from.query.url
  }
  next()
})

router.afterEach(route => {
})

Hooks exclusif à un certain itinéraire

Comme mentionné, il est utilisé séparément pour un certain itinéraire, qui est essentiellement le même que le crochet dans le composant suivant. Ils font tous référence à un itinéraire spécifique. La différence est que la définition générale ici concerne le routeur et non le composant. Comme suit

const router = new VueRouter({
 routes: [
  {
   path: '/foo',
   component: Foo,
   beforeEnter: (to, from, next) => {
    // ...
   },
   beforeLeave: (to, from, next) => {
    // ...
   }
  }
 ]
})

Hooks intégrés au composant

Jetez d'abord un œil à la définition officielle :

Vous pouvez définir directement la navigation de routage suivante hooks dans le composant de routage

1. beforeRouteEnter

2. beforeRouteUpdate (nouveau dans 2.2)

3. beforeRouteLeave

Composant de routage ! Composant de routage ! Les choses importantes sont dites trois fois. Tout le monde doit faire attention au « composant de routage » mentionné ici, et au composant de routage ! == composant, composant de routage ! == composant, composant de routage ! == Composants ! Je n'y avais jamais prêté attention auparavant, puis j'ai bêtement ajusté la fonction hook dans le sous-composant et j'ai découvert que cela ne fonctionnait jamais. . .

Voyons d'abord ce qu'est un composant de routage ?

Composants de routage : composants directement définis au niveau du composant dans le routeur

C'est-à-dire que les composants autres que le fichier vue d'entrée défini dans le routeur n'ont pas de fonctions hook, il n'y a donc pas il faut les utiliser. Mais si vous l’utilisez, aucune erreur ne sera signalée, il ne répondra simplement pas. (Je voulais faire un dessin, mais je suis trop paresseux... Comprenez-le vous-même, c'est facile à comprendre)

Revenons sur la façon d'utiliser le crochet dans l'itinéraire. très simple et méthodes au niveau des données et des méthodes

beforeRouteLeave(to, from, next) {
  // ....
  next()
},
beforeRouteEnter(to, from, next) {
  // ....
  next()
},
beforeRouteUpdate(to, from, next) {
  // ....
  next()
},
computed: {},
method: {}

Trois paramètres sont impliqués dans les trois hooks de routage Passons directement à l'introduction officielle ici

1. à : Route. : L'objet d'itinéraire cible qui est sur le point d'entrer

2. depuis : Itinéraire : L'itinéraire que la navigation actuelle est sur le point de quitter

3. suivant : Fonction : cela doit être appelé Méthode pour résoudre ce hook. L'effet d'exécution dépend des paramètres d'appel de la méthode suivante.

4. next() : passez au hook suivant dans le pipeline. Si tous les hooks sont exécutés, l'état de navigation est confirmé.

5. next(false) : Interrompre la navigation en cours. Si l'URL du navigateur change (peut-être manuellement par l'utilisateur ou par le bouton Précédent du navigateur), l'adresse URL sera réinitialisée à l'adresse correspondant à l'itinéraire d'origine.

6. suivant('/') ou suivant({ chemin : '/' }) : accédez à une autre adresse. La navigation en cours est interrompue et une nouvelle navigation démarre.

J'ai compilé ce qui précède pour vous, j'espère que cela vous sera utile à l'avenir.

Articles connexes :

Comment remplacer des éléments de nœud par jQuery

Servlet3.0 interagit avec du javascript pur via Ajax Détaillé exemple

Exemple de code de plat en forme d'arbre implémenté par 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!