Comment utiliser le routage pour réaliser un saut de page et un accès dans Vue

Comment utiliser le routage pour réaliser le saut de page et l'accès dans Vue

Introduction :
Dans le développement front-end, le saut de page est une exigence très courante. Vue fournit le plug-in Vue Router pour implémenter des fonctions de routage, ce qui nous permet de gérer plus facilement le routage des pages dans SPA (application monopage). Cet article expliquera comment utiliser le routage pour réaliser un saut de page et un accès dans Vue, et donnera des exemples de code spécifiques.

1. Installez et configurez Vue Router

1. Installez Vue Router
   Ouvrez la ligne de commande dans le répertoire du projet et exécutez la commande suivante pour installer Vue Router :

   npm install vue-router

2. Configurer Vue Router
   Créez un répertoire de routeur dans le projet, puis créez un fichier index.js dans ce répertoire. Configurez Vue Router dans le fichier index.js. Le code spécifique est le suivant :

   import Vue from 'vue'
   import VueRouter from 'vue-router'
   
   Vue.use(VueRouter)
   
   const routes = [
     {
    path: '/',
    name: 'Home',
    component: Home
     },
     {
    path: '/about',
    name: 'About',
    component: About
     }
   ]
   
   const router = new VueRouter({
     mode: 'history',
     base: process.env.BASE_URL,
     routes
   })
   
   export default router

   Ici, nous définissons deux routes, l'une est le chemin racine '/' correspondant au composant Home, et l'autre chemin correspond à '/about ' Le composant est À propos.

2. Saut de page

1. Écrire un lien de saut de page
   Dans le modèle Vue, vous pouvez utiliser la balise <router-link> pour générer un lien de saut de page. Par exemple, nous ajoutons un lien vers la page À propos dans le composant App.vue. Le code est le suivant : <router-link>标签来生成页面跳转的链接。例如，我们在App.vue组件中添加一个跳转到About页面的链接，代码如下：

   <template>
     <div>
    <h1 id="Hello-Vue-Router">Hello Vue Router!</h1>
    <router-link to="/about">About</router-link>
    <router-view></router-view>
     </div>
   </template>

2. 页面渲染
   要在页面中展示对应的组件，需要在Vue模板中使用<router-view>标签来进行组件的渲染。

三、页面访问

1. 在组件中获取路由参数
   在路由中，可以通过参数的方式向目标组件传递数据。例如，我们在About组件中获取路由参数并展示，代码如下：

   <template>
     <div>
    <h2 id="About-Page">About Page</h2>
    <p>参数：{{ $route.params.id }}</p>
     </div>
   </template>
   
   <script>
   export default {
     name: 'About'
   }
   </script>

   在上述代码中，我们通过$route.params.id来获取路由参数，并在页面中展示出来。

2. 编写动态路由
   有时候需要跳转到的页面地址是动态生成的，我们可以使用动态路由来实现。例如，我们创建一个新的组件Profile，并定义一个动态路由，具体代码如下：

   // 路由配置
   const routes = [
     // ...
     {
    path: '/profile/:username',
    name: 'Profile',
    component: Profile
     }
   ]
   
   // Profile组件
   <template>
     <div>
    <h2 id="Profile-Page">Profile Page</h2>
    <p>用户名：{{ $route.params.username }}</p>
     </div>
   </template>
   
   <script>
   export default {
     name: 'Profile'
   }
   </script>

   在上述代码中，我们定义了一个动态路由/profile/:username，然后在Profile组件中使用$route.params.usernamerrreee

Rendu de page

Pour afficher le composant correspondant sur la page, vous devez utiliser <router. dans la balise></router.> du modèle Vue pour restituer les composants.

3. Accès à la page🎜🎜🎜🎜Obtenir les paramètres de routage dans le composant🎜Dans le routage, les données peuvent être transmises au composant cible via les paramètres. Par exemple, nous obtenons les paramètres de routage et les affichons dans le composant About. Le code est le suivant : 🎜rrreee🎜Dans le code ci-dessus, nous obtenons les paramètres de routage via $route.params.id et affichez-les sur la page. 🎜🎜🎜🎜Écrire un routage dynamique🎜Parfois, l'adresse de la page à laquelle il faut accéder est générée dynamiquement, nous pouvons utiliser le routage dynamique pour y parvenir. Par exemple, nous créons un nouveau composant Profile et définissons une route dynamique. Le code spécifique est le suivant : 🎜rrreee🎜Dans le code ci-dessus, nous définissons une route dynamique /profile/:username, puis dans le profil Utilisez $route.params.username dans le composant pour obtenir le nom d'utilisateur dynamique et l'afficher sur la page. 🎜🎜🎜🎜Résumé : 🎜Cet article explique comment utiliser le routage pour réaliser un saut de page et un accès dans Vue. En installant et en configurant Vue Router, nous pouvons gérer de manière flexible les sauts de page et les accès dans SPA. J'espère que cet article vous aidera à apprendre le routage Vue et vous permettra de mieux maîtriser les compétences de développement 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!