Rumah hujung hadapan web View.js Bagaimana untuk menggunakan penghalaan untuk melaksanakan lompatan halaman dalam Vue?

Bagaimana untuk menggunakan penghalaan untuk melaksanakan lompatan halaman dalam Vue?

Jul 21, 2023 am 08:33 AM
vue penghalaan Lompat halaman

Bagaimana untuk menggunakan penghalaan untuk melaksanakan lompatan halaman dalam Vue?

Dengan pembangunan berterusan teknologi pembangunan bahagian hadapan, Vue.js telah menjadi salah satu rangka kerja bahagian hadapan yang paling popular. Dalam pembangunan Vue, lompat halaman adalah bahagian penting. Vue menyediakan Penghala Vue untuk mengurus penghalaan aplikasi, dan penukaran lancar antara halaman boleh dicapai melalui penghalaan. Artikel ini akan memperkenalkan cara menggunakan penghalaan untuk melaksanakan lonjakan halaman dalam Vue, dengan contoh kod.

Mula-mula, pasang pemalam vue-router dalam projek Vue. Anda boleh memasangnya dengan arahan berikut:

npm install vue-router

Selepas pemasangan selesai, perkenalkan vue-router dalam fail main.js dan gunakannya:

import Vue from 'vue'
import App from './App.vue'
import router from './router'

new Vue({
  el: '#app',
  router,
  render: h => h(App)
})

Konfigurasikan penghalaan dalam fail router.js:

import Vue from 'vue'
import Router from 'vue-router'
import Home from './views/Home.vue'
import About from './views/About.vue'

Vue.use(Router)

export default new Router({
  mode: 'history',
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/about',
      name: 'about',
      component: About
    }
  ]
})

Dalam contoh ini , kami mengkonfigurasi Terdapat dua laluan: halaman utama (/) dan halaman tentang (/kira-kira). Laman Utama dan Perihal masing-masing adalah dua komponen, yang perlu dibuat di bawah folder pandangan.

Tambah saluran keluar penghalaan dalam App.vue:

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

Kini, kami telah melengkapkan konfigurasi penghalaan asas. Seterusnya, kita boleh menggunakan penghalaan dalam komponen untuk melaksanakan lompatan halaman.

Dalam komponen yang perlu melompat ke halaman, anda boleh menggunakan tag <router-link> untuk menjana pautan lompat. Sebagai contoh, kami boleh menambah pautan ke halaman Perihal dalam komponen Home.vue: <router-link>标签来生成跳转链接。例如,我们可以在Home.vue组件中添加一个跳转到About页面的链接:

<template>
  <div>
    <h1>Home</h1>
    <router-link to="/about">Go to About</router-link>
  </div>
</template>

在About.vue组件中也可以添加返回Home页面的链接:

<template>
  <div>
    <h1>About</h1>
    <router-link to="/">Go back to Home</router-link>
  </div>
</template>

通过<router-link>标签生成的链接将会自动被转化为<a>标签。

除了使用<router-link>标签生成链接,我们还可以通过编程的方式实现页面跳转。在需要进行跳转的地方,可以使用$router对象来调用Vue Router提供的方法。例如,在一个按钮的点击事件处理函数中,可以使用以下代码实现跳转:

methods: {
  goToAbout() {
    this.$router.push('/about')
  }
}

上述代码通过$router.push()rrreee

Kami juga boleh menambah pautan kembali ke halaman Utama dalam komponen About.vue:

rrreee

melalui akan ditukar secara automatik menjadi teg <a>. 🎜🎜Selain menggunakan tag <router-link> untuk menjana pautan, kami juga boleh melaksanakan lompatan halaman secara pemrograman. Di mana anda perlu melompat, anda boleh menggunakan objek $router untuk memanggil kaedah yang disediakan oleh Vue Router. Contohnya, dalam pengendali acara klik butang, anda boleh menggunakan kod berikut untuk melaksanakan lompatan: 🎜rrreee🎜Kod di atas melaksanakan lompatan halaman melalui kaedah $router.push(), dan parameter ialah lompat Laluan ke halaman. 🎜🎜Selepas mengkonfigurasi penghalaan dan melaksanakan lompatan halaman melalui langkah di atas, kami boleh melompat ke halaman dalam projek Vue dengan bebas. Dalam pembangunan sebenar, anda boleh mengkonfigurasi lebih banyak laluan mengikut keperluan khusus, dan menggunakan fungsi lain yang disediakan oleh Vue Router untuk melaksanakan logik lompat halaman yang lebih kompleks. 🎜

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

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Alat AI Hot

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

Video Face Swap

Video Face Swap

Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!

Artikel Panas

Skop pembolehubah PHP dijelaskan
1 bulan yang lalu By 百草
Mengulas kod dalam php
4 minggu yang lalu By 百草
Petua untuk menulis komen php
4 minggu yang lalu By 百草

Alat panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Topik panas

Tutorial PHP
1510
276
Bagaimana untuk membina perpustakaan komponen dengan Vue? Bagaimana untuk membina perpustakaan komponen dengan Vue? Jul 10, 2025 pm 12:14 PM

Membina perpustakaan komponen VUE memerlukan merancang struktur di sekitar senario perniagaan dan mengikuti proses pembangunan, ujian dan pelepasan yang lengkap. 1. Reka bentuk struktur harus diklasifikasikan mengikut modul berfungsi, termasuk komponen asas, komponen susun atur dan komponen perniagaan; 2. Gunakan pembolehubah SCSS atau CSS untuk menyatukan tema dan gaya; 3. Menyatukan spesifikasi penamaan dan memperkenalkan eslint dan lebih cantik untuk memastikan gaya kod yang konsisten; 4. Paparkan penggunaan komponen di tapak dokumen sokongan; 5. Gunakan Vite dan alat lain untuk pakej sebagai pakej NPM dan konfigurasikan rollupOptions; 6. Ikuti spesifikasi Semver untuk menguruskan versi dan changelogs semasa penerbitan.

Cara Menggunakan PHP untuk membangunkan Platform Komuniti Q & A Penjelasan terperinci mengenai model pengewangan komuniti interaktif PHP Cara Menggunakan PHP untuk membangunkan Platform Komuniti Q & A Penjelasan terperinci mengenai model pengewangan komuniti interaktif PHP Jul 23, 2025 pm 07:21 PM

1. 2. Prestasi tinggi memerlukan pergantungan pada cache (redis), pengoptimuman pangkalan data, CDN dan giliran tak segerak; 3. Keselamatan mesti dilakukan dengan penapisan input, perlindungan CSRF, HTTPS, penyulitan kata laluan dan kawalan kebenaran; 4. Pengiklanan pilihan wang, langganan ahli, ganjaran, komisen, pembayaran pengetahuan dan model lain, terasnya adalah untuk memadankan nada komuniti dan keperluan pengguna.

Menjana URL untuk Laluan Dinamakan di Laravel. Menjana URL untuk Laluan Dinamakan di Laravel. Jul 16, 2025 am 02:50 AM

Cara yang paling biasa untuk menjana laluan yang dinamakan di Laravel adalah menggunakan fungsi penolong laluan (), yang secara automatik sepadan dengan laluan berdasarkan nama laluan dan mengendalikan parameter mengikat. 1. Lulus nama laluan dan parameter dalam pengawal atau pandangan, seperti laluan ('user.profile', ['id' => 1]); 2. Apabila pelbagai parameter, anda hanya perlu lulus array, dan perintah itu tidak menjejaskan padanan, seperti laluan ('user.post.show', ['id' => 1, 'postid' => 10]); 3. Pautan boleh dibenamkan secara langsung dalam templat bilah, seperti melihat maklumat; 4. Apabila parameter pilihan tidak disediakan, mereka tidak dipaparkan, seperti laluan ('user.post',

Cara Membangunkan Sistem Borang Pintar AI Dengan Reka Bentuk dan Analisis Pistol PHP PHP Cara Membangunkan Sistem Borang Pintar AI Dengan Reka Bentuk dan Analisis Pistol PHP PHP Jul 25, 2025 pm 05:54 PM

Apabila memilih rangka kerja PHP yang sesuai, anda perlu mempertimbangkan secara komprehensif mengikut keperluan projek: Laravel sesuai untuk pembangunan pesat dan menyediakan enjin template eloquentorm dan bilah, yang mudah untuk operasi pangkalan data dan rendering bentuk dinamik; Symfony lebih fleksibel dan sesuai untuk sistem kompleks; Codeigniter adalah ringan dan sesuai untuk aplikasi mudah dengan keperluan prestasi tinggi. 2. Untuk memastikan ketepatan model AI, kita perlu memulakan dengan latihan data berkualiti tinggi, pemilihan penunjuk penilaian yang munasabah (seperti ketepatan, penarikan balik, nilai F1), penilaian prestasi biasa dan penalaan model, dan memastikan kualiti kod melalui ujian unit dan ujian integrasi, sambil terus memantau data input untuk mencegah data drift. 3. Banyak langkah diperlukan untuk melindungi privasi pengguna: menyulitkan dan menyimpan data sensitif (seperti AES

Pintu masuk percuma ke laman web sumber produk Vue selesai. Produk siap Vue lengkap dilihat secara kekal dalam talian Pintu masuk percuma ke laman web sumber produk Vue selesai. Produk siap Vue lengkap dilihat secara kekal dalam talian Jul 23, 2025 pm 12:39 PM

Artikel ini telah memilih satu siri laman web sumber produk siap peringkat tinggi untuk pemaju dan pelajar Vue. Melalui platform ini, anda boleh menyemak imbas, belajar, dan juga menggunakan semula projek lengkap Vue berkualiti tinggi secara dalam talian secara percuma, dengan itu dengan cepat meningkatkan kemahiran pembangunan dan keupayaan amalan projek anda.

Bagaimana saya membuat laluan asas di yii? Bagaimana saya membuat laluan asas di yii? Jul 09, 2025 am 01:15 AM

TOCREATEABASICROUTEINYII, FirstSetupAcontrollerbyPlacingItInTHeControllersDirectoryWithProperernamingandClassDefinitionErtingYii \ Web \ Web.1)

Cara Menggunakan PHP Untuk Melaksanakan Sistem Cadangan Kandungan AI PHP Mekanisme Pengedaran Kandungan Pintar Cara Menggunakan PHP Untuk Melaksanakan Sistem Cadangan Kandungan AI PHP Mekanisme Pengedaran Kandungan Pintar Jul 23, 2025 pm 06:12 PM

1. PHP terutamanya menjalankan pengumpulan data, komunikasi API, pemprosesan peraturan perniagaan, pengoptimuman cache dan paparan cadangan dalam sistem cadangan kandungan AI, dan bukan secara langsung melaksanakan latihan model kompleks; 2. Sistem ini mengumpul tingkah laku pengguna dan data kandungan melalui PHP, memanggil perkhidmatan AI back-end (seperti model Python) untuk mendapatkan hasil cadangan, dan menggunakan Redis Cache untuk meningkatkan prestasi; 3. Algoritma cadangan asas seperti penapisan kolaboratif atau persamaan kandungan boleh melaksanakan logik ringan dalam PHP, tetapi pengkomputeran besar-besaran masih bergantung kepada perkhidmatan AI profesional; 4. Pengoptimuman perlu memberi perhatian kepada masa nyata, permulaan sejuk, kepelbagaian dan maklum balas yang ditutup gelung, dan cabaran termasuk prestasi konkurensi tinggi, kestabilan kemas kini model, pematuhan data dan tafsiran cadangan. PHP perlu bekerjasama untuk membina maklumat yang stabil, pangkalan data dan front-end.

Bagaimana Membina Permohonan Vue untuk Pengeluaran? Bagaimana Membina Permohonan Vue untuk Pengeluaran? Jul 09, 2025 am 01:42 AM

Menggunakan aplikasi VUE ke persekitaran pengeluaran memerlukan pengoptimuman prestasi, memastikan kestabilan dan meningkatkan kelajuan pemuatan. 1. Gunakan Vuecli atau Vite untuk membina versi pengeluaran, menghasilkan direktori Dist dan menetapkan pembolehubah persekitaran yang betul; 2. Jika anda menggunakan mod sejarah Vuerouter, anda perlu mengkonfigurasi pelayan untuk jatuh ke index.html; 3. Menyebarkan direktori Dist ke nginx/apache, netlify/vercel atau menggabungkan pecutan CDN; 4. Dayakan strategi pemampatan dan penyemak imbas GZIP untuk mengoptimumkan pemuatan; 5. Melaksanakan komponen pemuatan malas, memperkenalkan perpustakaan UI atas permintaan, membolehkan HTTPS, mencegah serangan XSS, menambah tajuk CSP, dan menyekat nama domain SDK pihak ketiga untuk meningkatkan keselamatan.

See all articles