Maison  >  Article  >  interface Web  >  Comment configurer le routage Vue3, effectuer des sauts d'itinéraire et transmettre des paramètres ?

Comment configurer le routage Vue3, effectuer des sauts d'itinéraire et transmettre des paramètres ?

王林
王林avant
2023-05-09 23:28:164502parcourir

    1. Installer le routage

    npm i vue-router

    2. Écrivez le routage qui doit être affiché

    #🎜🎜. # dans src Créez un dossier pages dans le répertoire et créez deux fichiers vue nommés student.vue et person.vue

    Comment configurer le routage Vue3, effectuer des sauts ditinéraire et transmettre des paramètres ?

    Écrivez deux fichiers vue respectivement# 🎜 🎜#

    student.vue et person.vue

    <template>
        学生
    </template>
     
    <script setup>
     
    </script>
     
    <style scoped lang="less">
     
    </style>
    <template>
    人类
    </template>
     
    <script setup>
     
    </script>
     
    <style scoped lang="less">
     
    </style>

    3. Configurer le routage

    Configurer le fichier router.js dans le répertoire src

    import { createRouter,createWebHistory } from "vue-router";
    const router=createRouter({
        history:createWebHistory(),
        routes:[
            {
                component:()=>import(&#39;../pages/person.vue&#39;),
                name:&#39;person&#39;,
                path:&#39;/person&#39;
            },
            {
                component:()=>import(&#39;../pages/student.vue&#39;),
                name:&#39;student&#39;,
                path:&#39;/student&#39;
            },
            {
                //实现路由重定向,当进入网页时,路由自动跳转到/student路由
                redirect:&#39;/student&#39;,
                path:&#39;/&#39;
            }
        ]
    })
    export default router
    #🎜 🎜#3. Utilisez le routage

    Utilisez le routage dans main.js

    import { createApp } from &#39;vue&#39;
    import App from &#39;./App.vue&#39;
    import router from &#39;./router&#39;
     
    createApp(App).use(router).mount(&#39;#app&#39;)

    pour afficher le routage dans app.vue, utilisez router-link pour le saut de routage, pour représenter lequel itinéraire vers lequel accéder

    <template>
      <router-view></router-view>
      <hr>
      <div>
        <router-link to="/student">到student路由</router-link>
        <br>
        <router-link to="/person">到person路由</router-link>
      </div>
    </template>
     
    <script setup>
     
    </script>
    <style scoped>
     
    </style>

    L'effet est comme indiqué dans la figure ci-dessous Cliquez sur (vers l'itinéraire de l'élève) ou (vers l'itinéraire de la personne) pour accéder à l'itinéraire

    #🎜. 🎜## 🎜🎜#

    4. Routage programmatique

    Le routage déclaratif utilise un lien de routeur pour les sauts de routage, et le routage programmatique est implémenté via des fonctionsComment configurer le routage Vue3, effectuer des sauts ditinéraire et transmettre des paramètres ?

    Modifier l'application. vue , vue3 utilise une API combinée, vous devez introduire

    pour introduire useRouter, useRoute et

    #🎜🎜 #const router=useRouter()

    const route=useRoute()

    <template>
      <router-view></router-view>
      <hr>
      <div>
        <button @click="toStudent">到student路由</button>
        <br>
        <button @click="toPerson">到person路由</button>
      </div>
    </template>
     
    <script setup>
    import {useRouter,useRoute} from &#39;vue-router&#39;
    const router=useRouter()
    const route=useRoute()
    const toStudent=()=>{
      router.push(&#39;student&#39;)
    }
    const toPerson=()=>{
      router.push(&#39;person&#39;)
    }
    </script>
    <style scoped>
     
    </style>

    via router.push Effectuer un saut de routage

    Utiliser le routeur routeur entre les routes, et l'itinéraire actuel utilise tout le routage

    Les résultats sont les suivants Comme le montre la figure, implémentez le saut d'itinéraire programmatique

    Si aucun alias n'est défini lors de la configuration de l'itinéraire, vous devez passer par le routeur Objet de configuration .push# 🎜🎜#
    const toStudent=()=>{
      router.push({
        path:&#39;/student&#39;
      })
    }
    const toPerson=()=>{
      router.push({
        path:&#39;/person&#39;
      })
    }

    5. Passage du paramètre de routage

    5. 1 passage du paramètre de requêteComment configurer le routage Vue3, effectuer des sauts ditinéraire et transmettre des paramètres ?

    Pass id,name

    const toStudent=()=>{
      router.push({
        path:&#39;/student&#39;,
        query:{
          id:1,
          name:&#39;张三&#39;
        }
      })
    }
    #🎜 🎜# au routage étudiant L'itinéraire étudiant reçoit le paramètre de requête

    <template>
        学生组件
        <div>{{data.query}}</div>
    </template>
     
    <script setup>
    import { reactive } from &#39;vue&#39;;
    import {useRouter,useRoute} from &#39;vue-router&#39;
    const route=useRoute()
    let data=reactive({
        query: route.query
    })
    </script>

    L'effet est comme le montre la figure ci-dessous

    5, 2 transmettez le paramètre params

    # 🎜🎜# En supposant que les paramètres params soient transmis à la route de la personne, ils doivent être modifiés lors de la configuration de la route 🎜#En même temps, la configuration du routage doit être modifiée. En supposant que les mots-clés soient transmis,

    devez-vous utiliser des espaces réservés et des mots-clés dans le chemin

    Comment configurer le routage Vue3, effectuer des sauts ditinéraire et transmettre des paramètres ? ? Indique qu'il peut être transmis ou non #🎜🎜 #

    6. Configuration des sous-routages

    Ajouter des sous-composants (composants stu1, stu2) au parcours étudiant

    #🎜 🎜#

    Le chemin du sous-composant ne contient pas /Composant

    const toPerson=()=>{
      router.push({
        name:&#39;person&#39;,
        params:{
          keyword:2
        }
      })
    }
    Afficher les sous-composants dans le composant étudiant

    {
          component:()=>import(&#39;../pages/person.vue&#39;),
          name:&#39;person&#39;,
          path:&#39;/person/:keyword?&#39;
    },

    En utilisant le lien de routeur pour le saut de routage, vous pouvez également passer par le routage programmatique

    #🎜 🎜#

    to="/student/stu1" Vous devez utiliser l'intégralité du chemin pour sauter

    Affichage des effets

    #🎜🎜 #Comment configurer le routage Vue3, effectuer des sauts ditinéraire et transmettre des paramètres ?

    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!

    Déclaration:
    Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer