Quels sont les différents modes de routage de vue ?

Le routage Vue comporte trois modes : Hash, History et Abstract. Différences : 1. Le caractère # apparaîtra dans le chemin de l'URL en mode hachage, mais pas dans les autres modes ; 2. Les modifications de la valeur de hachage déclencheront l'événement hashchange, mais pas dans les autres modes ; 3. L'adresse entière en mode historique ; est rechargé et les enregistrements de l'historique peuvent être enregistrés, ce qui est pratique en avant et en arrière, les autres modes ne le peuvent pas.

L'environnement d'exploitation de ce tutoriel : système windows7, version vue3, ordinateur DELL G3.

Le routage vue a en fait trois modes :

• Hash : utilisez la valeur de hachage de l'URL comme itinéraire. Prend en charge tous les navigateurs.

• Historique : depuis l'API d'historique HTML5 et la configuration du serveur

• Résumé : prend en charge tous les modes d'exécution javascript. S'il s'avère qu'il n'y a pas d'API de navigateur, le routage sera automatiquement forcé dans ce mode.

vue-router utilise le mode hachage par défaut, c'est-à-dire que l'URL suivante apparaîtra :, avec un signe # dans l'URL

Nous pouvons utiliser le code suivant pour le modifier en mode historique :

import Vue from 'vue'
import Router from 'vue-router'
const userInfo = () => import('@/views/userInfo')
Vue.use(Router)

export default new Router({
  mode: 'history',//hash abstract
  routes: [
    {
      path: '/user-info/:userId',
      component: userInfo
    }
  ]
})

Différence

Mode de hachage :

• Le caractère # apparaîtra dans le chemin de l'url

• La valeur de hachage n'est pas incluse dans la requête HTTP. Elle est traitée par le routage front-end, Ainsi, la page ne sera pas actualisée lorsque la valeur de hachage est modifiée. Aucune demande ne sera envoyée au serveur

• Les modifications de la valeur de hachage déclencheront l'événement hashchange

mode historique :

• Le l'adresse entière est rechargée, les enregistrements de l'historique peuvent être enregistrés et il est pratique d'avancer et de reculer

• API HTML5 (non prise en charge par les anciens navigateurs) et configuration du serveur HTTP S'il n'y a pas de configuration en arrière-plan, 404 apparaîtra lorsque le message apparaîtra. la page est actualisée

Configuration nginx :

location / {
  try_files $uri $uri/ /index.html;
}

Acquisition des paramètres d'itinéraire

https://xxx.com//user-info/888 

this.$route.params.userId

https://xxx.com//user-info?userId=888

this.$route.query.userId

(Partage de vidéos d'apprentissage : Développement front-end Web, Vidéo de programmation de base)

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!