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

1. Routing installieren

npm i vue-router

Nach dem Login kopieren
Schreiben Sie jeweils zwei Vue-Dateien

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

Nach dem Login kopieren

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

Nach dem Login kopieren

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

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

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>

Nach dem Login kopieren

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'
  })
}

Nach dem Login kopieren

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

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>

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

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!