Cara menggunakan penghalaan untuk mencapai lonjakan halaman dan bertukar dalam Vue

Sangat mudah untuk menggunakan penghalaan untuk melompat dan menukar halaman dalam Vue. Vue Router ialah pengurus penghalaan rasmi Vue.js, yang boleh membantu kami melaksanakan penukaran halaman dan navigasi dalam aplikasi Vue. Artikel ini akan menggunakan contoh kod khusus untuk memperkenalkan cara menggunakan Penghala Vue untuk mencapai lonjakan dan penukaran halaman.

Pertama, kita perlu memasang Penghala Vue. Penghala Vue boleh dipasang melalui npm atau benang. Selepas

npm install vue-router

atau

yarn add vue-router

dipasang, perkenalkan Vue Router di mana anda perlu menggunakannya.

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

Seterusnya, kita perlu mencipta contoh VueRouter dan mengkonfigurasi penghalaan. Kita boleh membuat konfigurasi penghalaan dalam fail berasingan dan kemudian mengimport dan menggunakan konfigurasi penghalaan ini dalam fail utama.

// router.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from './components/Home.vue'
import About from './components/About.vue'
import Contact from './components/Contact.vue'

Vue.use(VueRouter)

const router = new VueRouter({
  routes: [
    { path: '/', component: Home },
    { path: '/about', component: About },
    { path: '/contact', component: Contact }
  ],
  mode: 'history' // 可选，使用history模式可以去掉URL中的#
})

export default router

Dalam kod di atas, kami menentukan tiga laluan: '/' sepadan dengan komponen Laman Utama, '/about' sepadan dengan komponen Perihal dan '/contact' sepadan dengan komponen Kenalan. Selain itu, kami juga boleh menetapkan mod penghalaan melalui pilihan mod Lalai ialah mod cincang Gunakan mod sejarah untuk mengalih keluar # dalam URL.

Kemudian, perkenalkan dan gunakan konfigurasi penghalaan ini dalam fail utama.

// main.js

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

new Vue({
  router, // 将路由配置注入Vue实例
  render: h => h(App)
}).$mount('#app')

Dalam kod di atas, kami menyuntik konfigurasi penghalaan ke dalam contoh Vue supaya fungsi penghalaan boleh digunakan sepanjang aplikasi.

Seterusnya, kita boleh menggunakan teg dalam komponen untuk melompat ke halaman.

<!-- Home.vue -->

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

Dalam kod di atas, kami menggunakan teg untuk membuat pautan, dan atribut untuk menentukan laluan untuk melompat ke.

Akhir sekali, kita boleh menggunakan teg dalam komponen untuk memaparkan komponen yang sepadan dengan laluan semasa.

<!-- App.vue -->

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

Dalam kod di atas, teg akan memaparkan komponen yang sepadan secara dinamik berdasarkan laluan semasa.

Pada ketika ini, kami telah menyelesaikan penggunaan penghalaan dalam Vue untuk mencapai lompatan halaman dan penukaran. Jalankan aplikasi dan anda akan mendapati bahawa selepas mengklik teg

Di atas adalah proses asas menggunakan Penghala Vue untuk mencapai lompatan halaman dan penukaran. Dengan memperkenalkan Penghala Vue, mengkonfigurasi penghalaan, dan menggunakan teg dan Saya harap artikel ini dapat membantu pembelajaran dan perkembangan anda.

Atas ialah kandungan terperinci Cara menggunakan penghalaan untuk mencapai lonjakan halaman dan bertukar dalam Vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!