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

1. Installer le routage

npm i vue-router

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

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('../pages/person.vue'),
            name:'person',
            path:'/person'
        },
        {
            component:()=>import('../pages/student.vue'),
            name:'student',
            path:'/student'
        },
        {
            //实现路由重定向，当进入网页时，路由自动跳转到/student路由
            redirect:'/student',
            path:'/'
        }
    ]
})
export default router

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

Copier après la connexion

<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>

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 fonctions

#🎜🎜 #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>

Copier après la connexion

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

const toStudent=()=>{
  router.push({
    path:'/student'
  })
}
const toPerson=()=>{
  router.push({
    path:'/person'
  })
}

5. Passage du paramètre de routage

5. 1 passage du paramètre de requête

const toStudent=()=>{
  router.push({
    path:'/student',
    query:{
      id:1,
      name:'张三'
    }
  })
}

<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

# 🎜🎜# 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,

 ? 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:'person',
    params:{
      keyword:2
    }
  })
}

Afficher les sous-composants dans le composant étudiant

{
      component:()=>import('../pages/person.vue'),
      name:'person',
      path:'/person/:keyword?'
},

Copier après la connexion

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

#🎜🎜 #

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!