Rumah  >  Artikel  >  hujung hadapan web  >  Bagaimana untuk mengkonfigurasi penghalaan Vue3, melakukan lompatan laluan dan lulus parameter?

Bagaimana untuk mengkonfigurasi penghalaan Vue3, melakukan lompatan laluan dan lulus parameter?

王林
王林ke hadapan
2023-05-09 23:28:164504semak imbas

    1 Pasang laluan

    npm i vue-router

    2. Tulis laluan yang perlu dipaparkan

    Buat folder halaman dalam src. direktori dan ciptanya di dalamnya Dua fail vue dinamakan student.vue, person.vue

    Bagaimana untuk mengkonfigurasi penghalaan Vue3, melakukan lompatan laluan dan lulus parameter?

    Tulis dua fail vue

    student.vue dan person .vue

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

    3. Konfigurasikan penghalaan

    Konfigurasikan fail router.js dalam direktori 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 dalam 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;)

    memaparkan laluan dalam app.vue, menggunakan pautan penghala untuk melompat laluan, untuk mewakili laluan mana untuk melompat ke

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

    , kesannya adalah seperti yang ditunjukkan dalam rajah di bawah , klik (ke laluan pelajar) atau ( penghalaan kepada orang) akan melakukan lompat laluan

    Bagaimana untuk mengkonfigurasi penghalaan Vue3, melakukan lompatan laluan dan lulus parameter?4 Penghalaan terprogram

    Penghalaan deklaratif melakukan lompatan laluan melalui penghala-. pautan, penghalaan terprogram Ubah suai app.vue melalui fungsi

    vue3 menggunakan gabungan API Anda perlu memperkenalkan

    untuk memperkenalkan useRouter, useRoute dan

    <.> const router=useRouter()

    const route=useRoute()

    rreeeRoute hop melalui penghala. tekan Gunakan penghala untuk beralih ke

    Laluan semasa menggunakan penghalaan toute

    Hasilnya adalah seperti yang ditunjukkan dalam rajah di bawah, merealisasikan program lompat laluan

    Jika tiada alias ditetapkan semasa mengkonfigurasi laluan, anda perlu melompat melalui objek konfigurasi router.pushBagaimana untuk mengkonfigurasi penghalaan Vue3, melakukan lompatan laluan dan lulus parameter?

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

    5

    5. 1 Pemindahan parameter pertanyaan

    Pas id, nama

    const toStudent=()=>{
      router.push({
        path:&#39;/student&#39;
      })
    }
    const toPerson=()=>{
      router.push({
        path:&#39;/person&#39;
      })
    }

    laluan pelajar untuk menerima parameter pertanyaan

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

    Kesannya adalah seperti yang ditunjukkan dalam rajah di bawah

    5. 2 Lulus parameter params Bagaimana untuk mengkonfigurasi penghalaan Vue3, melakukan lompatan laluan dan lulus parameter?

    Andaikan parameter params dihantar ke laluan orang dan ia perlu diubah suai semasa konfigurasi penghalaan

    Parameter parameter perlu dihantar mengikut nama Tentukan laluan

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

    Pada masa yang sama, konfigurasi penghalaan perlu diubah suai dengan mengandaikan bahawa kata kunci diluluskan,

    perlu menggunakan ruang letak dan kata kunci dalam laluan

    ? Menunjukkan sama ada ia boleh diluluskan atau tidak

    const toPerson=()=>{
      router.push({
        name:&#39;person&#39;,
        params:{
          keyword:2
        }
      })
    }

    Terima parameter params secara peribadi.vue

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

    6 , Konfigurasi sub-laluanBagaimana untuk mengkonfigurasi penghalaan Vue3, melakukan lompatan laluan dan lulus parameter?

    Tambahkan sub-komponen (komponen stu1, stu2) pada laluan pelajar

    Bagaimana untuk mengkonfigurasi penghalaan Vue3, melakukan lompatan laluan dan lulus parameter?

    Laluan subkomponen tidak mengandungi /

    <template>
        人类组件
        <div>{{data.params.keyword}}</div>
    </template>
     
    <script setup>
    import { reactive } from &#39;vue&#39;;
    import {useRouter,useRoute} from &#39;vue-router&#39;
    const route=useRoute()
    let data=reactive({
        params: route.params
    })
    </script>
    Tulis komponen stu1

    {
                component:()=>import(&#39;../pages/student.vue&#39;),
                name:&#39;student&#39;,
                path:&#39;/student&#39;,
                children:[
                    {
                        path:&#39;stu1&#39;,
                        name:&#39;stu1&#39;,
                        component:()=>import(&#39;../pages/stu1.vue&#39;)
                    },
                    {
                        path:&#39;stu2&#39;,
                        name:&#39;stu2&#39;,
                        component:()=>import(&#39;../pages/stu2.vue&#39;)
                    },
                    {
                        path:&#39;&#39;,
                        component:()=>import(&#39;../pages/stu1.vue&#39;)
                    }
                ]
            }
    Tulis komponen stu2

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

    Paparkan sub-komponen dalam pelajar komponen

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

    Dengan menggunakan router -link untuk routing jump, anda juga boleh melompat melalui programmatic routing

    to="/student/stu1" Anda perlu menggunakan sepenuhnya laluan untuk melompat

    Paparan kesan

    Atas ialah kandungan terperinci Bagaimana untuk mengkonfigurasi penghalaan Vue3, melakukan lompatan laluan dan lulus parameter?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

    Kenyataan:
    Artikel ini dikembalikan pada:yisu.com. Jika ada pelanggaran, sila hubungi admin@php.cn Padam