Comment utiliser le routage pour implémenter des applications SPA dans Vue

SPA (Single Page Application) est une architecture d'application Web moderne, son principal avantage est qu'elle peut offrir une meilleure expérience utilisateur par rapport aux applications multipages traditionnelles. Vue.js est un framework frontal populaire qui fournit d'excellentes fonctions de routage et peut être bien utilisé pour implémenter des applications SPA. Cet article explique comment utiliser le routage pour implémenter des applications SPA dans Vue.

Introduction à Vue Router

Vue Router est le gestionnaire de routage officiellement fourni par Vue.js. Il peut être bien intégré aux applications Vue.js et fournit des API qui peuvent nous aider à implémenter la fonction de routage des applications monopage. Vue Router fournit non seulement un mécanisme pour implémenter la navigation de routage, mais fournit également certaines fonctions pour gérer les paramètres de routage, l'état du routage et le transfert d'objets, etc.

Installer Vue Router

Pour utiliser Vue Router, vous devez d'abord installer Vue Router. Nous pouvons l'installer via npm ou fil. Exécutez la commande suivante dans la fenêtre du terminal :

npm install vue-router --save

ou

yarn add vue-router

Une fois l'installation terminée, nous devons introduire Vue Router dans le fichier d'entrée principal de l'application Vue.js :

import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './App.vue'

Vue.use(VueRouter)

const router = new VueRouter({
  routes
})

new Vue({
  el: '#app',
  router,
  render: h => h(App)
})

Nous introduisons d'abord Vue et VueRouter, et ensuite nous installerons VueRouter dans Vue. Ensuite, nous créons une instance de routeur et la transmettons à l'instance d'application Vue.js.

Configuration des routes

Pour utiliser Vue Router, nous devons définir une table de routage qui indiquera à Vue Router quels composants doivent être rendus pour chaque chemin d'URL dans l'application. On peut définir la table de routage via un tableau :

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

Dans cet exemple, nous définissons trois règles de routage. Lorsque l'utilisateur accède au chemin '/', le composant Home sera rendu ; lorsque l'utilisateur accède au chemin '/about', le composant About sera rendu ; lorsque l'utilisateur accède au chemin '/contact', le composant Contact sera rendu. être rendu.

Nous pouvons configurer la table de routage dans l'application via l'option routes de l'instance Vue Router :

const router = new VueRouter({
  routes
})

Après avoir terminé toute la configuration ci-dessus, nous pouvons utiliser des éléments angulaires pour implémenter une application multi-vues.

Redirection d'itinéraire

Parfois, nous devons rediriger un certain chemin d'URL vers un autre chemin. Vue Router prend également en charge la redirection d'itinéraire. Grâce à la redirection, vous pouvez transférer une adresse URL vers une autre adresse. Nous pouvons définir une règle de routage de redirection :

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

Dans cet exemple, lorsque l'utilisateur accède à '/', il sera automatiquement redirigé vers la route '/home' et restituera le composant Home.

Routage imbriqué

Dans Vue Router, nous pouvons utiliser le routage imbriqué pour implémenter des vues imbriquées. Le routage imbriqué signifie qu'un itinéraire peut avoir des sous-itinéraires et que chaque sous-itinéraire peut avoir son propre chemin et ses propres composants.

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

Dans cet exemple, nous définissons la route parent MainLayout et trois routes enfants Home, About et Contact. Lorsque l'utilisateur accède au chemin racine /, le composant MainLayout sera rendu et jouera le rôle de "parent" dans le composant MainLayout. La directive <router-view> dans le composant parent est utilisée pour afficher et/ou imbriquer des sous-vues. <router-view>指令用来显示和/或嵌套子视图。

命名路由

在Vue Router中，我们可以使用名称来定义和使用路由，以便更易于管理和重构应用程序。

const routes = [
  { path: '/user/:username', name: 'user', component: User }
]

在这个例子中，我们使用了name属性来指定路由名称。使用命名路由，我们可以通过名称而不是路径导航到路由：

<router-link :to="{ name: 'user', params: { username: 'me' }}">My Profile</router-link>

当用户单击My Profile链接时，将自动导航到“用户”路由，并向User组件传递参数“me”。

路由参数

在Vue Router中，路由参数是指URL中一个特殊的部分，例如:/user/:username，其中 :username 是一个路由参数。我们可以在组件中使用$route.params来访问路由参数。

const User = {
  template: '<div>User {{ $route.params.username }}</div>'
}

在这个例子中，我们通过$route.params.username访问路由参数，以渲染User组件。当用户访问'/user/me'时，将渲染User组件，并显示“User me”。

导航守卫

Vue Router 提供了一些导航守卫，可以在路由跳转前或跳转后执行一些测试或操作：

const router = new VueRouter({
  routes
})

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

router.afterEach((to, from) => {
  // ...
})

在这个例子中，我们定义了beforeEach和afterEach导航钩子。beforeEach钩子在路由跳转前执行，afterEach钩子在路由跳转后执行。它们都可以接收to和from参数，其中to参数表示要跳转的目标路由，from参数表示要跳转的来源路由。在beforeEach

Routes nommées

Dans Vue Router, nous pouvons définir et utiliser des routes à l'aide de noms pour faciliter la gestion et la refactorisation de l'application.

rrreee

Dans cet exemple, nous utilisons l'attribut name pour spécifier le nom de la route. En utilisant des itinéraires nommés, nous pouvons accéder à l'itinéraire par son nom plutôt que par son chemin :

rrreee

Lorsque l'utilisateur clique sur le lien Mon profil, il naviguera automatiquement vers l'itinéraire "Utilisateur" et transmettra les paramètres au Composant utilisateur "moi". 🎜🎜Paramètres de routage🎜🎜Dans Vue Router, les paramètres de routage font référence à une partie spéciale de l'URL, telle que :/user/:username, où :username est un paramètre de routage. Nous pouvons accéder aux paramètres de route en utilisant $route.params dans le composant. 🎜rrreee🎜Dans cet exemple, nous accédons aux paramètres de route via $route.params.username pour restituer le composant User. Lorsque l'utilisateur accède à « /user/me », le composant User sera rendu et « User me » sera affiché. 🎜🎜Navigation Guards🎜🎜Vue Router fournit des gardes de navigation qui peuvent effectuer certains tests ou opérations avant ou après le saut d'itinéraire : 🎜rrreee🎜Dans cet exemple, nous définissons beforeEach et afterEach code> Crochet de navigation. Le hook <code>beforeEach est exécuté avant le saut de route, et le hook afterEach est exécuté après le saut de route. Ils peuvent tous deux recevoir des paramètres vers et depuis, le paramètre to indiquant l'itinéraire cible à parcourir et le paramètre from indiquant l'itinéraire source à parcourir. Dans le hook beforeEach, nous pouvons effectuer des vérifications d'autorisation ou une autre logique de contrôle. 🎜🎜Résumé🎜🎜Vue Router est un gestionnaire de routage flexible et facile à utiliser qui peut bien implémenter les applications SPA. Dans cet article, nous avons présenté l'utilisation de base de Vue Router, y compris l'installation, la configuration des itinéraires, les redirections d'itinéraires, les itinéraires imbriqués, les itinéraires nommés, les paramètres d'itinéraire et les gardes de navigation. Ce sont des utilisations courantes de Vue Router et peuvent nous aider à mieux créer des applications d'une seule page. 🎜🎜Si vous souhaitez en savoir plus sur Vue Router, veuillez vous référer à la documentation officielle de Vue Router. 🎜

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!