Routage Vue3 (Vue Router)

Dans ce chapitre, nous présenterons le routage Vue.

Le routage Vue nous permet d'accéder à différents contenus via différentes URL.

Avec Vue, nous pouvons implémenter des applications web monopages (SPA) multi-vues.

Le routage Vue.js nécessite le chargement de la bibliothèquevue-router

URL de la documentation chinoise :documentation vue-router。

Vue Router est responsable de la correspondance entre les chemins d'URL et les composants de l'application. Lorsque les utilisateurs naviguent dans l'application, l'URL est mise à jour mais la page ne se recharge pas, offrant une expérience utilisateur fluide.

La figure ci-dessus montre unestructure de routes imbriquées à deux niveaux：

• de premier niveau (App.vuede<router-view>)responsable du rendude mises en page autonomes(commeLogin.vue) oumise en page du cadre principal（Layout.vue）。
• mise en page du cadre principal (Layout.vue)contient en interne un second<router-view>, utilisé pour rendreles composants enfants de la page de fonctionnalité(commeDashboard.vue、User.vue), permettant ainsi un affichage persistant de l'en-tête, de la barre latérale et du pied de page.
• Les chemins sans correspondance finiront par mener à unpage404.vue。

Composants principaux

Installation

Installation npm

npm install vue-router

npm (miroir chinois)

Il est recommandé d'utiliser le miroir Taobao :

npm install -g cnpm --registry=https://registry.npmmirror.com
cnpm install vue-router@4

Téléchargement direct / CDN

https://unpkg.com/vue-router@4

Utilisation de base

1. Créer une table de routage

// src/router/index.js
import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'
import About from '../views/About.vue'

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

export default createRouter({
  history: createWebHistory(),
  routes
})

2. Monter dans l'application

// main.js
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

createApp(App).use(router).mount('#app')

3. Sortie de page

<router-view></router-view>

4. Navigation

<router-link to="/about">About</router-link>

5. Routage dynamique

{ path: '/user/:id', component: User }

En visitant /user/10, $route.params.id === '10'.

6. Chargement différé

const About = () => import('../views/About.vue')

7. Gardiens de navigation (Authentification)

router.beforeEach((to, from, next) => {
  next()
})

8. Redirection

{ path: '/old', redirect: '/' }

9、404

{ path: '/:pathMatch(.*)*', component: NotFound }

Exemple simple

Vue.js + vue-router permettent de mettre en œuvre facilement une application monopage.

<router-link>est un composant utilisé pour configurer un lien de navigation afin de basculer entre différents contenus HTML.toL'attribut `to` est l'adresse cible, c'est-à-dire le contenu à afficher.

Dans l'exemple suivant, nous ajoutons vue-router, puis configurons les correspondances des composants et des routes, puis indiquons à vue-router où les afficher. Le code est le suivant :

router-link

Notez que nous n'avons pas utilisé une balise `<a>` classique, mais plutôt un composant personnalisé `router-link` pour créer des liens. Cela permet à Vue Router de modifier l'URL sans recharger la page et de gérer la génération et l'encodage des URL. Nous verrons plus tard comment tirer parti de ces fonctionnalités.

router-view

`router-view` affichera le composant correspondant à l'URL. Vous pouvez le placer n'importe où pour l'adapter à votre mise en page.

Les liens de navigation cliqués se verront ajouter des stylesclass ="router-link-exact-active router-link-active"。

Exemple d'application

L'exemple suivant couvre les étapes du routage :Définition、Création、Montage、NavigationetRenducinq étapes essentielles.

1. main.js (fichier d'entrée)

2. router/index.js (configuration des routes)

3. App.vue (composant racine)

Lorsque vous exécutez cette application :

• Cliquez sur le lienHome, l'URL devient/，<router-view>s'affiche dansHome Pagele contenu du composant.
• Cliquez sur le lienAbout, l'URL devient/about，<router-view>s'affiche dansAbout Usle contenu du composant.
• Cliquez sur le lien404 Demo, l'URL devient/nonexistent，<router-view>s'affiche dans404 Not Foundle contenu du composant.

Attributs associés à <router-link>

Ensuite, apprenons-en davantage sur les attributs de <router-link>.

à

Représente le lien vers la route cible. Lorsqu'il est cliqué, la valeur de `to` sera transmise à `router.push()` immédiatement, donc cette valeur peut être une chaîne ou un objet décrivant l'emplacement cible.

<!-- 字符串 -->
<router-link to="home">Home</router-link>
<!-- 渲染结果 -->
<a href="home.html">Home</a>

<!-- 使用 v-bind 的 JS 表达式 -->
<router-link v-bind:to="'home'">Home</router-link>

<!-- 不写 v-bind 也可以，就像绑定别的属性一样 -->
<router-link :to="'home'">Home</router-link>

<!-- 同上 -->
<router-link :to="{ path: 'home' }">Home</router-link>

<!-- 命名的路由 -->
<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>

<!-- 带查询参数，下面的结果为 /register?plan=private -->
<router-link :to="{ path: 'register', query: { plan: 'private' }}">Register</router-link>

remplacement

Si l'attribut replace est défini, un clic appellera router.replace() au lieu de router.push(), et aucun enregistrement d'historique ne sera laissé après la navigation.

<router-link :to="{ path: '/abc'}" replace></router-link>

append

Lorsque l'attribut append est défini, le chemin est préfixé au chemin actuel (relatif). Par exemple, si nous naviguons de /a vers un chemin relatif b, sans append le chemin est /b, avec append il est /a/b.

<router-link :to="{ path: 'relative/path'}" append></router-link>

balise

Parfois, vous voulez<router-link>pour effectuer le rendu sous forme d'une certaine balise, par exemple<li>.tagNous utilisons donc

<router-link to="/foo" tag="li">foo</router-link>
<!-- 渲染结果 -->
<li>foo</li>

active-class

la prop pour spécifier quelle balise. Il écoute toujours les clics et déclenche la navigation.

<style>
   ._active{
      background-color : red;
   }
</style>
<p>
   <router-link v-bind:to = "{ path: '/route1'}" active-class = "_active">Router Link 1</router-link>
   <router-link v-bind:to = "{ path: '/route2'}" tag = "span">Router Link 2</router-link>
</p>

Définissez le nom de classe CSS utilisé lorsque le lien est actif. Il peut être remplacé par le code suivant.classRemarque iciactive-class="_active"。

exact-active-class

use

<p>
   <router-link v-bind:to = "{ path: '/route1'}" exact-active-class = "_active">Router Link 1</router-link>
   <router-link v-bind:to = "{ path: '/route2'}" tag = "span">Router Link 2</router-link>
</p>

event

Configurez la classe qui doit être active lorsque le lien correspond exactement. Elle peut être remplacée par le code suivant.

<router-link v-bind:to = "{ path: '/route1'}" event = "mouseover">Router Link 1</router-link>

Le code ci-dessus définit l'événement sur mouseover, et lorsque la souris passe sur Router Link 1, le contenu HTML de destination changera.

Manuel de l'API principale de Vue Router (v4, Vue 3)

I.createRouterOptions de configuration

II. Fabrique d'historique

III.RouteRecord(Enregistrement de route)

IV. Navigation du routeur (méthodes de l'instance de routeur)

V. Gardiens de navigation

VI.<router-link>Props

VII.<router-view>Props

VIII.Route(Objet de route actuel)

Cet objet est obtenu viauseRoute()outhis.$routeobtenues.

IX. Composition API

X. Navigation programmatique (Exemple complet)