Une brève introduction à $router et $route dans vue (avec des exemples)

Cet article vous apporte une brève introduction à $router et $route dans Vue (avec des exemples). Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il vous sera utile.

Concept de base du routage

itinéraire, c'est un itinéraire.

{ path: '/home', component: Home }

itinéraires est un groupe d'itinéraires.

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

Un routeur peut être compris comme un conteneur ou un mécanisme qui gère un groupe de routes. Pour faire simple, la route mappe uniquement les URL et les fonctions. Après avoir reçu une URL, il recherche la fonction correspondante dans la table de mappage de routage. Ce processus est géré par le routeur.

    const router = new VueRouter({
          routes // routes: routes 的简写
    })

Dans VUE,

$route est l'objet de saut de routeur actuel qui peut obtenir le nom, le chemin, la requête, les paramètres, etc.

$router est une instance de VueRouter. Si vous souhaitez accéder à une autre URL, utilisez la méthode $router.push. Pour revenir à l'historique précédent, utilisez la méthode $router.go. Comme mentionné ci-dessus, $router gère ici les sauts de routage. En anglais, la fin de er indique une sorte de personne. Ici, vous pouvez imaginer cela comme un gestionnaire, qui contrôle où va l'itinéraire (push, go), ce qui facilite la tâche. souviens-toi.

Saut de route

1 Vous pouvez écrire à la main le chemin complet :

this.$router.push({path:`/user/${userId}`})

Cette méthode nécessite la configuration suivante dans le routage

{
     path: '/user/:userId',
     name: '***',
     component: ***
   }

Cette façon de recevoir les paramètres est la suivante.$route.params.userId.

2 Vous pouvez également utiliser des paramètres pour transmettre :

this.$router.push({name:'Login',params:{id:'leelei'}})
//不带参数 变成 ip/login

3 Vous pouvez également utiliser une requête pour transmettre :

this.$router.push({path:'/login',query:{id:'leelei'})
//带查询参数变成 ip/login?id=leelei
//带斜杠/代表从根目录出发，不会嵌套之前的路径

Les paramètres de requête concernent le chemin et les paramètres les paramètres sont Pour le nom. . Les méthodes de réception des paramètres sont similaires. . this.$route.query. et this.$route.params.

Notez qu'il s'agit simplement d'une URL de saut. Les composants affichés lors du passage à cette URL doivent être configurés. Les règles pour le saut de routeur et le saut d'étiquette

Quelques choses à noter

Si vous utilisez une requête pour transmettre des paramètres, vous verrez que les paramètres transmis dans la barre d'URL du navigateur sont similaires pour obtenir des requêtes, utilisez params pour transmettre les paramètres. Sinon, ce ne sera pas le cas, comme pour une requête de publication.

Si le chemin est fourni, les paramètres seront ignorés (c'est-à-dire que si vous souhaitez utiliser des paramètres pour transmettre des paramètres, vous devez utiliser le nom), mais ce n'est pas le cas pour la requête. Si vous utilisez le chemin complet et les paramètres de requête pour transmettre, les paramètres transmis par la route ne seront pas perdus lors de l'actualisation de la page.

La différence entre router.push et router.replace n'ajoutera pas de nouveaux enregistrements à l'historique, mais remplacera les enregistrements de l'historique actuel, c'est-à-dire que le bouton « retour » de la page Web passée à l'aide du remplacement ne peut pas être cliqué.

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!