Rumah hujung hadapan web View.js Perkara yang perlu diambil perhatian semasa melaksanakan fungsi ubah hala Vue Router

Perkara yang perlu diambil perhatian semasa melaksanakan fungsi ubah hala Vue Router

Sep 15, 2023 pm 01:21 PM
Perkara yang perlu diperhatikan vue router Fungsi ubah hala

Vue Router 重定向功能实现中的注意事项

Nota tentang melaksanakan fungsi ubah hala Vue Router

Apabila menggunakan Vue.js untuk membangunkan aplikasi web, Vue Router ialah pemalam yang penting Ia menyediakan fungsi penghalaan, pengawal navigasi, dll., supaya antara halaman Jumping dan pengurusan telah menjadi lebih mudah dan lebih mudah. Salah satu fungsi penting ialah pengalihan, yang secara automatik boleh melompat ke URL lain apabila pengguna mengakses URL tertentu. Artikel ini akan memperkenalkan perkara yang anda perlu beri perhatian apabila melaksanakan fungsi ubah hala Vue Router dalam amalan dan memberikan contoh kod khusus.

Sebelum menggunakan fungsi ubah hala Vue Router, kita perlu mencipta projek asas Vue menggunakan vue-cli terlebih dahulu. Jalankan arahan berikut dalam direktori projek untuk mencipta dan memasang Penghala Vue:

vue create vue-router-demo
cd vue-router-demo
npm install vue-router
Salin selepas log masuk

Kemudian, buat folder penghala dalam direktori src dan buat fail index.js di dalamnya untuk menulis konfigurasi Penghala Vue:

// src/router/index.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    component: () => import('../views/About.vue')
  },
  // 其他路由...
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router
Salin selepas log masuk

Di atas Dalam kod , kami mentakrifkan dua laluan: satu ialah laluan akar '/', menunjuk kepada komponen Laman Utama, dan satu lagi ialah '/about', menunjuk kepada komponen Perihal. Seterusnya, kita perlu menambah konfigurasi ubah hala pada fail untuk melompat ke URL lain secara automatik apabila pengguna mengakses URL tertentu. Kod sampel adalah seperti berikut:

// src/router/index.js
// ...

const routes = [
  // ...

  {
    path: '/redirect',
    redirect: '/' // 将 /redirect 重定向到根路由
  },
  {
    path: '/redirectAbout',
    redirect: '/about' // 将 /redirectAbout 重定向到 /about
  }
]

// ...
Salin selepas log masuk

Dalam kod di atas, kami telah menentukan dua peraturan ubah hala. Apabila pengguna mengakses '/redirect', ia secara automatik akan melompat ke laluan root '/' apabila pengguna mengakses '/redirectAbout', ia secara automatik akan melompat ke '/about'. Peraturan ubah hala yang lebih kompleks boleh ditakrifkan berdasarkan keperluan sebenar.

Perlu diingatkan bahawa susunan peraturan ubah hala adalah penting. Penghala Vue akan memadankan laluan dalam susunan yang ditakrifkan dalam tatasusunan laluan Setelah perlawanan berjaya, ia akan melaksanakan operasi yang sepadan, termasuk pengalihan. Oleh itu, jika terdapat berbilang peraturan ubah hala dan terdapat laluan padanan pendua, hanya peraturan padanan pertama akan berkuat kuasa. Oleh itu, kita harus mengatur susunan laluan secara munasabah mengikut keperluan.

Selain itu, terdapat situasi biasa di mana URL yang tidak wujud perlu diubah hala Sebagai contoh, pengguna mengakses laluan yang tidak ditentukan dan kami ingin mengubah hala ke halaman 404. Dalam Penghala Vue, anda boleh menggunakan penghalaan kad bebas dengan pengalihan untuk mencapai fungsi ini. Kod sampel adalah seperti berikut:

// src/router/index.js
// ...

const routes = [
  // ...

  {
    path: '*',
    redirect: '/404' // 将所有未匹配的路由重定向到 /404
  },
  {
    path: '/404',
    name: 'NotFound',
    component: () => import('../views/NotFound.vue')
  }
]

// ...
Salin selepas log masuk

Dalam kod di atas, kami mentakrifkan laluan kad bebas '*' untuk memadankan semua laluan yang tidak ditentukan. Apabila pengguna mengakses laluan yang tidak ditentukan, ia secara automatik akan melompat ke '/404' dan memaparkan komponen NotFound. Ini memberikan pengalaman pengguna yang lebih baik.

Untuk meringkaskan, semasa melaksanakan fungsi ubah hala Vue Router, anda perlu memberi perhatian kepada perkara berikut:

  1. Susun susunan penghalaan dengan munasabah untuk memastikan peraturan pengalihan boleh berkuat kuasa seperti yang diharapkan.
  2. Anda boleh menggunakan penghalaan kad bebas untuk mengendalikan laluan yang tidak ditentukan dan melakukan operasi ubah hala yang sepadan.
  3. Tentukan peraturan ubah hala berdasarkan keperluan sebenar dan tambahkan atribut ubah hala yang sepadan dalam konfigurasi penghalaan.

Saya harap artikel ini dapat membantu anda lebih memahami dan menggunakan fungsi ubah hala dalam Penghala Vue. Saya doakan anda berjaya dalam proses pembangunan Vue.js anda!

Atas ialah kandungan terperinci Perkara yang perlu diambil perhatian semasa melaksanakan fungsi ubah hala Vue Router. 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

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.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

AI Hentai Generator

AI Hentai Generator

Menjana ai hentai secara percuma.

Artikel Panas

R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)
2 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
Repo: Cara menghidupkan semula rakan sepasukan
4 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Cara mendapatkan biji gergasi
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)

Wuthering WavesPengenalan kepada perkara yang memerlukan perhatian semasa ujian Wuthering WavesPengenalan kepada perkara yang memerlukan perhatian semasa ujian Mar 13, 2024 pm 08:13 PM

Semasa ujian Mingchao, sila elakkan naik taraf sistem, tetapan semula kilang dan penggantian alat ganti untuk mengelakkan kehilangan maklumat dan log masuk permainan yang tidak normal. Peringatan khas: Tiada saluran rayuan semasa tempoh ujian, jadi sila kendalikannya dengan berhati-hati. Pengenalan kepada perkara yang memerlukan perhatian semasa ujian Mingchao: Jangan tingkatkan sistem, pulihkan tetapan kilang, ganti komponen peralatan, dsb. Nota: 1. Sila tingkatkan sistem dengan teliti semasa tempoh ujian untuk mengelakkan kehilangan maklumat. 2. Jika sistem dikemas kini, ia mungkin menyebabkan masalah tidak dapat log masuk ke permainan. 3. Pada peringkat ini, saluran rayuan masih belum dibuka Pemain dinasihatkan untuk memilih sama ada untuk menaik taraf mengikut budi bicara mereka sendiri. 4. Pada masa yang sama, satu akaun permainan hanya boleh digunakan dengan satu peranti Android dan satu PC. 5. Adalah disyorkan agar anda menunggu sehingga ujian selesai sebelum menaik taraf sistem telefon mudah alih atau memulihkan tetapan kilang atau menggantikan peranti.

Bagaimana untuk memulakan siaran langsung di Douyin buat kali pertama? Apakah yang perlu anda perhatikan semasa menyiarkan secara langsung buat kali pertama? Bagaimana untuk memulakan siaran langsung di Douyin buat kali pertama? Apakah yang perlu anda perhatikan semasa menyiarkan secara langsung buat kali pertama? Mar 22, 2024 pm 04:10 PM

Dengan kebangkitan platform video pendek, Douyin telah menjadi bahagian yang sangat diperlukan dalam kehidupan seharian ramai orang. Penyiaran langsung di Douyin dan berinteraksi dengan peminat adalah impian ramai pengguna. Jadi, bagaimanakah anda memulakan siaran langsung di Douyin buat kali pertama? 1. Bagaimana untuk memulakan siaran langsung di Douyin buat kali pertama? 1. Persediaan Untuk memulakan siaran langsung, anda perlu memastikan bahawa akaun Douyin anda telah melengkapkan pengesahan nama sebenar. Anda boleh menemui tutorial pengesahan nama sebenar dalam "Saya" -> "Tetapan" -> "Akaun dan Keselamatan" dalam APP Douyin. Selepas melengkapkan pengesahan nama sebenar, anda boleh memenuhi syarat siaran langsung dan memulakan siaran langsung pada platform Douyin. 2. Mohon kebenaran siaran langsung Selepas memenuhi syarat siaran langsung, anda perlu memohon kebenaran siaran langsung. Buka APP Douyin, klik "Saya" -> "Pusat Pencipta" -> "Terus

Nota Pembangunan C++: Elakkan Pengecualian Penunjuk Null dalam Kod C++ Nota Pembangunan C++: Elakkan Pengecualian Penunjuk Null dalam Kod C++ Nov 22, 2023 pm 02:38 PM

Dalam pembangunan C++, pengecualian penuding nol ialah ralat biasa, yang sering berlaku apabila penunjuk tidak dimulakan atau terus digunakan selepas dikeluarkan. Pengecualian penuding nol bukan sahaja menyebabkan ranap program, tetapi juga boleh menyebabkan kelemahan keselamatan, jadi perhatian khusus diperlukan. Artikel ini akan menerangkan cara untuk mengelakkan pengecualian penuding nol dalam kod C++. Memulakan pembolehubah penunjuk Penunjuk dalam C++ mesti dimulakan sebelum digunakan. Jika tidak dimulakan, penunjuk akan menunjuk ke alamat memori rawak, yang mungkin menyebabkan Pengecualian Penunjuk Null. Untuk memulakan penuding, arahkannya ke an

Soalan dan Nota Lazim: Menggunakan MyBatis untuk Pertanyaan Berkelompok Soalan dan Nota Lazim: Menggunakan MyBatis untuk Pertanyaan Berkelompok Feb 19, 2024 pm 12:30 PM

Nota dan Soalan Lazim tentang pernyataan pertanyaan kumpulan MyBatis Pengenalan MyBatis ialah rangka kerja lapisan kegigihan yang sangat baik yang menyokong operasi pangkalan data yang fleksibel dan cekap. Antaranya, pertanyaan kelompok adalah keperluan biasa Dengan menanyakan beberapa keping data pada satu masa, overhed sambungan pangkalan data dan pelaksanaan SQL boleh dikurangkan, dan prestasi sistem boleh dipertingkatkan. Artikel ini akan memperkenalkan beberapa langkah berjaga-jaga dan masalah biasa dengan pernyataan pertanyaan kelompok MyBatis, dan memberikan contoh kod khusus. Harap ini dapat memberikan sedikit bantuan kepada pembangun. Perkara yang perlu diperhatikan apabila menggunakan M

Langkah dan langkah berjaga-jaga untuk memasang pip tanpa rangkaian Langkah dan langkah berjaga-jaga untuk memasang pip tanpa rangkaian Jan 18, 2024 am 10:02 AM

Kaedah dan langkah berjaga-jaga untuk memasang pip dalam persekitaran luar talian Memasang pip menjadi cabaran dalam persekitaran luar talian di mana rangkaian tidak lancar. Dalam artikel ini, kami akan memperkenalkan beberapa kaedah memasang pip dalam persekitaran luar talian dan memberikan contoh kod khusus. Kaedah 1: Gunakan pakej pemasangan luar talian Dalam persekitaran yang boleh menyambung ke Internet, gunakan arahan berikut untuk memuat turun pakej pemasangan pip daripada sumber rasmi: pipdownloadpip Perintah ini akan memuat turun pip dan pakej bergantungnya secara automatik daripada sumber rasmi dan simpan dalam direktori semasa. Alihkan pakej termampat yang dimuat turun ke lokasi terpencil

Cara menggunakan Penghala Vue untuk lompat penghalaan dalam uniapp Cara menggunakan Penghala Vue untuk lompat penghalaan dalam uniapp Oct 18, 2023 am 08:52 AM

Cara menggunakan VueRouter untuk penghalaan lompatan dalam uniapp Menggunakan VueRouter untuk penghalaan lompatan dalam uniapp ialah operasi yang sangat biasa Artikel ini akan memperkenalkan secara terperinci cara menggunakan VueRouter dalam projek uniapp dan memberikan contoh kod khusus. 1. Pasang VueRouter Sebelum menggunakan VueRouter, kita perlu memasangnya terlebih dahulu. Buka baris arahan, masukkan direktori akar projek uniapp, dan kemudian laksanakan arahan berikut untuk memasang

Nota Pembangunan Python: Elakkan Masalah Kebocoran Memori Biasa Nota Pembangunan Python: Elakkan Masalah Kebocoran Memori Biasa Nov 22, 2023 pm 01:43 PM

Sebagai bahasa pengaturcaraan peringkat tinggi, Python mempunyai kelebihan kerana mudah dipelajari, mudah digunakan dan sangat cekap dalam pembangunan, dan menjadi semakin popular di kalangan pembangun. Walau bagaimanapun, disebabkan oleh cara mekanisme pengumpulan sampahnya dilaksanakan, Python terdedah kepada kebocoran memori apabila berurusan dengan jumlah memori yang besar. Artikel ini akan memperkenalkan perkara yang perlu anda perhatikan semasa pembangunan Python daripada tiga aspek: masalah kebocoran memori biasa, punca masalah dan kaedah untuk mengelakkan kebocoran memori. 1. Masalah kebocoran memori biasa: Kebocoran memori merujuk kepada ketidakupayaan untuk melepaskan ruang memori yang diperuntukkan oleh program semasa operasi.

Langkah dan langkah berjaga-jaga untuk menggunakan storan setempat untuk menyimpan data Langkah dan langkah berjaga-jaga untuk menggunakan storan setempat untuk menyimpan data Jan 11, 2024 pm 04:51 PM

Langkah dan langkah berjaga-jaga untuk menggunakan localStorage untuk menyimpan data Artikel ini memperkenalkan terutamanya cara menggunakan localStorage untuk menyimpan data dan menyediakan contoh kod yang berkaitan. LocalStorage ialah cara menyimpan data dalam penyemak imbas yang menyimpan data setempat ke komputer pengguna tanpa melalui pelayan. Berikut ialah langkah dan perkara yang perlu diberi perhatian apabila menggunakan localStorage untuk menyimpan data. Langkah 1: Semak sama ada penyemak imbas menyokong LocalStorage

See all articles