Wie konfiguriere ich das Vue3-Routing, führe Routensprünge durch und übergebe Parameter?

1. Routing installieren

npm i vue-router

Schreiben Sie jeweils zwei Vue-Dateien

student.vue und person.vue

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

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

3. Konfigurieren Sie das Routing

Konfigurieren Sie die Datei router.js im src-Verzeichnis

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

3. Verwenden Sie Routing

Verwenden Sie Routing in main.js

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

Routen in app.vue anzeigen, Router-Link verwenden, um Routen zu überspringen, um anzugeben, zu welcher Route gesprungen werden soll

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

Der Effekt ist wie in der Abbildung unten dargestellt, klicken Sie auf (zur Studentenroute) oder (zur Personenroute) zu Weiter Routensprung

4. Programmatisches Routing

Deklaratives Routing verwendet Router-Link für Routensprung, und programmatisches Routing wird durch Funktionen implementiert

Ändern Sie app.vue, vue3 verwendet eine kombinierte API, die eingeführt werden muss

Um Userouter, Useroute und

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>

route durch Router.push

Routing Router zu verwenden, wird zwischen Router. Router und die aktuelle Route verwenden Toute-Routing. Wenn beim Konfigurieren der Route kein Alias ​​festgelegt ist, müssen Sie über das Router.push-Konfigurationsobjekt springen 5, Routenparameter

5, 1 Abfrageparameterübertragung Pass-ID, Name an Schülerroute

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

Studentenroute empfängt Abfrageparameter

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

Der Effekt ist wie in der folgenden Abbildung dargestellt

5, 2 Übertragen Sie Parameterparameter

Gehen Sie davon aus, dass Parameterparameter an die Personenroute übergeben werden und während der Routingkonfiguration geändert werden müssen

Paramsparameter müssen mithilfe des Namens angegeben werden, um die Route anzugeben

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

Gleichzeitig , die Routing-Konfiguration muss geändert werden. Angenommen, das Schlüsselwort wird übergeben.

Müssen Platzhalter und Schlüsselwörter im Pfad verwendet werden

? Gibt an, ob es übergeben werden kann oder nicht.

const toPerson=()=>{
  router.push({
    name:'person',
    params:{
      keyword:2
    }
  })
}

Empfangen Sie den Parameter params in person.vue ) zur Studentenroute

Der Pfad der Unterkomponente enthält nicht / Sie können durch programmatisches Routing springen

to="/student/stu1" Sie müssen den vollständigen Pfad zum Springen verwenden

Wirkung Anzeige

Das obige ist der detaillierte Inhalt vonWie konfiguriere ich das Vue3-Routing, führe Routensprünge durch und übergebe Parameter?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!