Bagaimana untuk melaksanakan lompatan penghalaan hadapan di bawah Vue?

Vue ialah rangka kerja bahagian hadapan yang sangat baik Dalam pembangunan aplikasi, lompat laluan hadapan adalah keperluan yang sangat biasa. Vue menyediakan fungsi yang kaya untuk melaksanakan lompatan penghalaan. Artikel ini akan memperkenalkan pelaksanaan penghalaan terbina dalam Vue dan penggunaan perpustakaan penghalaan pihak ketiga Vue-Router.

1. Pelaksanaan penghalaan terbina dalam Vue

Dalam Vue, anda boleh menggunakan penghala vue terbina dalam untuk melaksanakan lompatan penghalaan hadapan.

1. Pasang vue-router

Gunakan arahan npm untuk memasang perpustakaan vue-router:

npm install vue-router

2. Buat objek Vue Router

Buat objek Vue Router dalam projek utama dan fail Vue. ikatkannya ke dalam contoh Vue. Seperti yang ditunjukkan di bawah:

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const router = new VueRouter({
  // 路由配置
})
new Vue({
  router
}).$mount('#app')

Dalam kod, kami mula-mula memperkenalkan vue-router dan mengikatnya pada contoh Vue. Kemudian objek Vue Router dicipta dan diletakkan dalam contoh Vue.

3. Konfigurasi penghalaan

Apabila mencipta objek Penghala Vue, anda perlu mengkonfigurasi penghalaan. Konfigurasi dalam Penghala Vue terutamanya termasuk laluan penghalaan, komponen penghalaan, alias penghalaan dan sebarang parameter lain. Laluan penghalaan sepadan dengan bahagian laluan dalam URL, dan komponen penghalaan mentakrifkan komponen yang akan dipaparkan di bawah laluan.

Sebagai contoh, jika kita ingin mencipta laluan untuk halaman, kita boleh menulisnya seperti ini semasa mengkonfigurasi laluan:

const router = new VueRouter({
  routes: [
    {
      path: '/about',
      component: About
    }
  ]
})

Antaranya, laluan penghalaan ialah "/about" dan komponen yang sepadan ialah Perihal.

4. Route Jump

Dengan konfigurasi penghalaan, kita boleh menggunakan fungsi lompat laluan terbina dalam Penghala Vue. Penghala Vue menyediakan teg pautan penghala dan kaedah router.push untuk melaksanakan lompatan laluan.

1) Gunakan teg pautan penghala

Anda boleh menggunakan teg pautan penghala dalam templat HTML untuk membuat pautan penghalaan. Teg pautan penghala akan menjana URL yang betul secara automatik berdasarkan konfigurasi penghalaan.

Contohnya:

<router-link to="/about">关于我们</router-link>

Apabila mengklik pada pautan Mengenai Kami, ia akan melompat ke halaman komponen yang sepadan dengan laluan penghalaan yang dikonfigurasikan "/about".

2) Gunakan kaedah router.push

Selain menggunakan tag pautan penghala, Vue Router juga menyediakan kaedah router.push untuk melaksanakan lompatan laluan.

Contohnya:

this.$router.push('/about')

Dalam komponen Vue, kita boleh menggunakan ini.$router untuk mendapatkan tika Vue Router, dan gunakan kaedah tolak untuk melaksanakan lompatan. Kod ini akan melompat ke halaman komponen dengan laluan penghalaan "/about".

2. Vue-router

Vue-Router ialah penghala rasmi berdasarkan Vue.js. Ia ialah pengurus penghalaan yang dikeluarkan secara rasmi oleh Vue.js, yang menyediakan fungsi berkuasa, seperti penghalaan bersarang, penghalaan dinamik, pemuatan malas laluan, dsb. Mari kita lihat cara menggunakan Vue-Router untuk melaksanakan lompatan penghalaan bahagian hadapan.

1. Pasang Vue-Router

Sebelum menggunakan Vue-Router, anda perlu memasangnya ke dalam projek terlebih dahulu. Kita boleh memasangnya menggunakan arahan npm.

npm install vue-router --save

2. Buat contoh penghalaan

Apabila membuat laluan Vue, kita boleh mengkonfigurasi maklumat penghalaan yang berkaitan bagi komponen halaman (termasuk subkomponen bersarang) yang perlu dilompat ke dalam tatasusunan dahulu.

Contohnya:

const routes = [
    {
        path: '/',
        component: Home
    },
    {
        path: '/about',
        component: About
    },
    {
        path: '/user/:id',
        component: User
    }
]

Tatasusunan ini mentakrifkan tiga maklumat penghalaan pertama mentakrifkan halaman lompat lalai sebagai Laman Utama, maklumat penghalaan kedua mentakrifkan halaman lompat sebagai Perihal, dan maklumat penghalaan ketiga mentakrifkan Halaman lompat ialah Pengguna. dan maklumat penghalaan perlu melepasi parameter id.

Seterusnya, kita boleh mencipta contoh penghalaan melalui kaedah createRouter Vue-Router.

Contohnya:

import { createRouter, createWebHistory } from 'vue-router'
const router = createRouter({
    history: createWebHistory(),
    routes
})

Dalam kod, kami menggunakan kaedah createRouter Vue-Router untuk mencipta contoh penghalaan dan mentakrifkan kaedah pengurusan sejarah penghalaan dan maklumat penghalaan. Antaranya, createWebHistory bermaksud menggunakan API Sejarah HTML5 untuk pengurusan penghalaan.

3. Daftar Laluan

Selepas mencipta tika penghalaan, kita perlu mendaftarkan tika penghalaan ke dalam tika aplikasi Vue.

Contohnya:

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

Dalam kod, kami mendaftarkan tika penghalaan ke dalam contoh aplikasi Vue melalui kaedah penggunaan createApp.

Selain mendaftarkan tika penghalaan, kami juga boleh melaksanakan lompatan penghalaan melalui komponen navigasi penghalaan paparan penghala dan pautan penghalaan komponen penghala yang disediakan oleh Vue-Router.

Contohnya:

<router-link to="/">Home</router-link>
<router-link to="/about">About</router-link>
<router-link :to="{name: 'user', params: {id: userId}}">User</router-link>
<router-view></router-view>

Dalam kod, kami menggunakan tag pautan penghala untuk mencipta tiga pautan lompat, dan menggunakan tag paparan penghala untuk memaparkan kandungan komponen penghalaan yang sepadan. Pautan ketiga perlu lulus id parameter dinamik.

4. Lompat laluan

Vue-Router menyediakan pelbagai cara untuk melaksanakan lompat laluan, seperti:

• Gunakan komponen pautan penghala;
• Gunakan kaedah ini.$router.push() dalam komponen Vue ;
• Gunakan kaedah ini.$router.replace() dalam komponen Vue;
• Gunakan kaedah ini.$router.go() dalam komponen Vue;
• Sebagai contoh, gunakan kaedah router.push dalam komponen Vue untuk melaksanakan lompatan penghalaan:

import { reactive } from 'vue'
export default {
    setup() {
        const state = reactive({
            userId: ''
        })
        const handleRoute = function() {
            router.push({
                name: 'user',
                params: { id: state.userId }
            })
        }
        return {
            state,
            handleRoute
        }
    }
}

Dalam kod, kami menggunakan reaktif untuk mencipta objek dalam komponen Vue, dan kemudian menggunakan kaedah router.push dalam handleRoute kaedah. Antaranya, medan nama sepadan dengan pautan penghala atau atribut nama maklumat penghalaan, dan params ialah objek yang mengandungi parameter dinamik yang diperlukan untuk penghalaan.

Kesimpulan

Vue-Router ialah pengurus penghalaan yang sangat berkuasa dan mudah digunakan. Dalam aplikasi Vue, Vue-Router boleh digunakan untuk melaksanakan lompatan laluan dengan mudah dan pemindahan parameter yang diperlukan untuk lompatan laluan. Bagi pembangun, ini menjadikan penulisan aplikasi satu halaman sangat mudah dan cekap.

Atas ialah kandungan terperinci Bagaimana untuk melaksanakan lompatan penghalaan hadapan di bawah Vue?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!