


Mari kita bincangkan tentang penghalaan dalam Vue3 dan menganalisis secara ringkas kaedah konfigurasi penghalaan
Artikel ini akan membawa anda melalui penghalaan dalam Vue3 dan bercakap tentang konfigurasi asas penghalaan, konfigurasi penghalaan dinamik, mod penghalaan, ubah hala, dll. Saya harap ia akan membantu anda.
[Cadangan berkaitan: "tutorial vue.js"]
Konfigurasi asas penghalaan
1. Pasang pemalam
npm install vue-router@next --save
2. Buat fail routers.ts
3. Perkenalkan komponen dan konfigurasikan laluan dalam routers.ts.
import { createRouter,createWebHashHistory } from 'vue-router'; // 引入组件 import Home from './components/Home.vue'; import News from './components/News.vue'; import User from './components/User.vue'; const router = createRouter({ history: createWebHashHistory(), routes: [ {path: '/', component: Home}, {path: '/news', component: News}, {path: '/user', component: User}, ] }) export default router;
4. Lekapkan fail penghalaan ke vue dalam main.ts.
import { createApp } from 'vue' import App from './App.vue' import routers from './routers'; // createApp(App).mount('#app') const app = createApp(App); app.use(routers); app.mount('#app');
5 Selepas komponen yang menggunakan penghalaan melekapkan pautan penghala melalui komponen paparan penghala atau pautan penghala
<template> <img src="/static/imghwm/default1.png" data-src="./assets/logo.png" class="lazy" alt="Vue logo" > <ul> <li> <router-link to="/">首页</router-link> </li> <li> <router-link to="/news">新闻</router-link> </li> <li> <router-link to="/user">用户</router-link> </li> </ul> <router-view></router-view> </template>
, anda hanya perlu memasang komponen yang sepadan dalam komponen Masukkan laluan yang ditentukan pada laluan halaman untuk melengkapkan lompatan, dan pautan penghala melaksanakan penghalaan dalam bentuk teg untuk lompatan.
Konfigurasi penghalaan dinamik
Konfigurasikan penghalaan dalam route.ts seperti berikut dan konfigurasikan penghalaan dinamik melalui /:aid.
//配置路由 const router = createRouter({ history: createWebHashHistory(), routes: [ { path: '/', component: Home , alias: '/home' }, { path: '/news', component: News }, { path: '/user', component: User }, { path: '/newscontent/:aid', component: NewsContent }, ], })
Apabila melompat melalui pautan penghala, rentetan templat dan titik bertindih + to diperlukan.
<ul> <li v-for="(item, index) in list" :key="index"> <router-link :to="`/newscontent/${index}`"> {{item}}</router-link> </li> </ul>
Dapatkan nilai yang diluluskan oleh laluan dinamik melalui ini.$route.params.
mounted(){ // this.$route.params 获取动态路由的传值 console.log(this.$route.params) }
Jika kita ingin melaksanakan pemindahan nilai yang serupa dengan GET, kita boleh menggunakan kaedah berikut
1 Konfigurasikan laluan seperti biasa laluan.
const router = createRouter({ history: createWebHashHistory(), routes: [ { path: '/', component: Home , alias: '/home' }, { path: '/news', component: News }, { path: '/user', component: User }, { path: '/newscontent', component: NewsContent }, ], })
2. Lompatan pautan penghala dalam bentuk tanda soal.
<router-link :to="`/newscontent?aid=${index}`"> {{item}}</router-link>
3 Dapatkan nilai dapatkan melalui ini.$route.query.
console.log(this.$route.query);
Navigasi atur cara laluan (laluan lompat JS)
Hanya nyatakan melalui ini.$router.push.
this.$router.push({ path: '/home' })
Jika anda ingin melaksanakan pemindahan nilai dapatkan, anda boleh menggunakan kaedah berikut.
this.$router.push({ path: '/home', query: {aid: 14} }) }
Penghalaan dinamik perlu menggunakan kaedah berikut.
this.$router.push({ path: '/home/123', // query: {aid: 14} })
Mod penghalaan
Mod cincang
Ciri biasa mod Cincang ialah penghalaan halaman mengandungi tanda pon .
const router = createRouter({ history: createWebHashHistory(), routes: [ ..., ], })
mod sejarah HTML5
Memperkenalkan createWebHistory.
Atribut sejarah dalam item konfigurasi penghala ditetapkan kepada createWebHistory().
import { createRouter, createWebHistory } from 'vue-router' //配置路由 const router = createRouter({ history: createWebHistory(), routes: [ ... ], })
Nota: Selepas menghidupkan mod Sejarah HTML5, anda perlu mengkonfigurasi statik pseudo semasa menerbitkan ke pelayan.
Mengkonfigurasi kaedah pseudo-statik:
https://router.vuejs.org/zh/guide/essentials/history-mode.html#Contoh konfigurasi belakang
Laluan bernama
Keadaan umum
Konfigurasikan atribut nama apabila mentakrifkan laluan
{ path: '/news', component: News,name:"news" }
Lepaskan objek untuk melompat
<router-link :to="{name: 'news'}">新闻</router-link>
Lepasi nilai melalui GET
-
Konfigurasikan atribut nama apabila mentakrifkan laluan
{ path: '/newscontent', component: NewsContent, name: "content" },
Masukkan objek termasuk pertanyaan
<li v-for="(item, index) in list" :key="index"> <router-link :to="{name: 'content',query: {aid: index}}"> {{item}}</router-link> </li>
Melalui penghalaan dinamik
Tentukan penghalaan dinamik dan nyatakan atribut nama
{ path: '/userinfo/:id', name: "userinfo", component: UserInfo }
-
Masukkan objek termasuk params
<router-link :to="{name: 'userinfo',params: {id: 123}}">跳转到用户详情</router-link>
Peralaan terprogram
sangat serupa dengan kaedah di atas.
<button @click="this.$router.push({name: 'userinfo',params: {id: 666}})">点击跳转</button>
Ubah hala laluan
{ path: '', redirect: "/home" }, // 路由重定向 { path: '/home', component: Home },
Alias laluan
Dalam contoh di bawah, akses laluan orang dan akses laluan alias adalah konsisten .
{ path: '/user', component: User, alias: '/people' }
alias juga boleh menjadi tatasusunan.
{ path: '/user', component: User, alias: ['/people','/u']}
Bentuk penghalaan dinamik.
{ path: '/userinfo/:id', name: "userinfo", component: UserInfo, alias: '/u/:id' }
Penghalaan bersarang
Senario aplikasi penghalaan bersarang biasanya pada bar navigasi.
Tentukan penghalaan bersarang
{ path: '/user', component: User, children: [ { path: '', redirect: "/user/userlist" }, { path: 'userlist', component: UserList }, { path: 'useradd', component: UserAdd } ] }
pautan penghala dan kandungan paparan paparan penghala bersama-sama
<div class="left"> <ul> <li> <router-link to="/user/userlist">用户列表</router-link> </li> <li> <router-link to="/user/useradd">增加用户</router-link> </li> </ul> </div> <div class="right"> <router-view></router-view> </div>
Untuk lebih banyak pengetahuan berkaitan pengaturcaraan, sila lawati: Pengenalan kepada Pengaturcaraan! !
Atas ialah kandungan terperinci Mari kita bincangkan tentang penghalaan dalam Vue3 dan menganalisis secara ringkas kaedah konfigurasi penghalaan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Vue.js adalah kerangka depan, dan rangka kerja belakang digunakan untuk mengendalikan logik sisi pelayan. 1) Vue.js memberi tumpuan kepada membina antara muka pengguna dan memudahkan pembangunan melalui pengikatan data komponen dan responsif. 2) Rangka kerja back-end seperti Express dan Django mengendalikan permintaan HTTP, operasi pangkalan data dan logik perniagaan, dan dijalankan di pelayan.

Vue.js disepadukan dengan tumpuan teknologi front-end untuk meningkatkan kecekapan pembangunan dan pengalaman pengguna. 1) Alat Pembinaan: Mengintegrasikan dengan Webpack dan Rollup untuk mencapai pembangunan modular. 2) Pengurusan Negeri: Bersepadu dengan VUEX untuk menguruskan status aplikasi yang kompleks. 3) Routing: Mengintegrasikan dengan Vuerouter untuk merealisasikan penghalaan aplikasi tunggal halaman. 4) Preprocessor CSS: Menyokong SASS dan kurang untuk meningkatkan kecekapan pembangunan gaya.

Netflix memilih React untuk membina antara muka penggunanya kerana reka bentuk komponen React dan mekanisme DOM maya dapat mengendalikan antara muka yang kompleks dan kemas kini yang kerap. 1) Reka bentuk berasaskan komponen membolehkan Netflix memecah antara muka ke dalam widget yang boleh diurus, meningkatkan kecekapan pembangunan dan pemeliharaan kod. 2) Mekanisme DOM maya memastikan kelancaran dan prestasi tinggi antara muka pengguna Netflix dengan meminimumkan operasi DOM.

Vue.js disukai oleh pemaju kerana mudah digunakan dan berkuasa. 1) Sistem pengikat data responsifnya secara automatik mengemas kini paparan. 2) Sistem komponen meningkatkan kebolehgunaan semula dan mengekalkan kod. 3) Ciri -ciri pengkomputeran dan pendengar meningkatkan kebolehbacaan dan prestasi kod. 4) Menggunakan vuedevtools dan memeriksa kesilapan konsol adalah teknik debugging biasa. 5) Pengoptimuman Prestasi termasuk penggunaan atribut utama, atribut yang dikira dan komponen-komponen Alive. 6) Amalan terbaik termasuk penamaan komponen yang jelas, penggunaan komponen fail tunggal dan penggunaan cangkuk kitaran hidup yang rasional.

Vue.js adalah rangka kerja JavaScript yang progresif yang sesuai untuk membina aplikasi front-end yang cekap dan boleh dipelihara. Ciri -ciri utamanya termasuk: 1. Pengikatan data responsif, 2. Pembangunan Komponen, 3. Dom maya. Melalui ciri -ciri ini, Vue.js memudahkan proses pembangunan, meningkatkan prestasi aplikasi dan mengekalkan, menjadikannya sangat popular dalam pembangunan web moden.

Vue.js dan bertindak balas masing -masing mempunyai kelebihan dan kekurangan mereka sendiri, dan pilihannya bergantung kepada keperluan projek dan keadaan pasukan. 1) vue.js sesuai untuk projek kecil dan pemula kerana kesederhanaan dan mudah digunakan; 2) React sesuai untuk projek besar dan UI yang kompleks kerana reka bentuk ekosistem dan komponennya yang kaya.

Vue.js meningkatkan pengalaman pengguna melalui pelbagai fungsi: 1. Sistem responsif menyedari maklum balas data masa nyata; 2. Pembangunan komponen meningkatkan kebolehgunaan semula kod; 3. Vuerouter menyediakan navigasi lancar; 4. Data dinamik mengikat dan animasi peralihan meningkatkan kesan interaksi; 5. Mekanisme pemprosesan ralat memastikan maklum balas pengguna; 6. Pengoptimuman prestasi dan amalan terbaik meningkatkan prestasi aplikasi.

Peranan vue.js dalam pembangunan web adalah bertindak sebagai rangka kerja JavaScript yang progresif yang memudahkan proses pembangunan dan meningkatkan kecekapan. 1) Ia membolehkan pemaju memberi tumpuan kepada logik perniagaan melalui pengikatan data yang responsif dan pembangunan komponen. 2) Prinsip kerja Vue.js bergantung kepada sistem responsif dan DOM maya untuk mengoptimumkan prestasi. 3) Dalam projek sebenar, adalah amalan biasa untuk menggunakan VUEX untuk menguruskan keadaan global dan mengoptimumkan respons data.


Alat AI Hot

Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool
Gambar buka pakaian secara percuma

Clothoff.io
Penyingkiran pakaian AI

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

Artikel Panas

Alat panas

Versi Mac WebStorm
Alat pembangunan JavaScript yang berguna

DVWA
Damn Vulnerable Web App (DVWA) ialah aplikasi web PHP/MySQL yang sangat terdedah. Matlamat utamanya adalah untuk menjadi bantuan bagi profesional keselamatan untuk menguji kemahiran dan alatan mereka dalam persekitaran undang-undang, untuk membantu pembangun web lebih memahami proses mengamankan aplikasi web, dan untuk membantu guru/pelajar mengajar/belajar dalam persekitaran bilik darjah Aplikasi web keselamatan. Matlamat DVWA adalah untuk mempraktikkan beberapa kelemahan web yang paling biasa melalui antara muka yang mudah dan mudah, dengan pelbagai tahap kesukaran. Sila ambil perhatian bahawa perisian ini

SublimeText3 versi Inggeris
Disyorkan: Versi Win, menyokong gesaan kod!

EditPlus versi Cina retak
Saiz kecil, penyerlahan sintaks, tidak menyokong fungsi gesaan kod

Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
