Bagaimana untuk melaksanakan lompat dalam penghala vue

Vue ialah salah satu rangka kerja bahagian hadapan yang paling popular pada masa ini Ia menyediakan banyak alatan untuk membantu pembangun membangunkan aplikasi web dengan lebih cepat dan mudah. Yang paling biasa digunakan ialah Vue Router. Vue Router ialah pengurus penghalaan rasmi Vue.js, yang boleh melaksanakan penukaran komponen dengan mudah dalam aplikasi SPA (aplikasi halaman tunggal). Jadi artikel ini akan memperkenalkan secara terperinci bagaimana Vue Router melaksanakan lompatan.

1. Konsep asas Vue Router

Vue Router ialah pengurus penghalaan rasmi berdasarkan Vue.js. Ia memisahkan pelbagai komponen halaman melalui penghalaan, dan komponen yang dipisahkan boleh diurus dan digunakan dengan lebih fleksibel. Antaranya, Penghala Vue mempunyai konsep penting berikut:

1. Laluan

Laluan mewakili laluan halaman Mengakses laluan yang berbeza boleh memaparkan halaman atau komponen yang berbeza. Laluan boleh mengandungi parameter dinamik dan kami boleh menggunakan parameter ini untuk mengawal tingkah laku halaman, kesan paparan komponen, dsb.

2. Penghala

Penghala ialah tika dalam Vue.js yang digunakan untuk mengurus penghalaan seluruh halaman. Kita boleh menggunakan penghala untuk menukar laluan, memantau perubahan laluan dan operasi lain.

3. Komponen penghalaan

Komponen penghalaan ialah pelbagai komponen yang ingin kami paparkan dalam penghalaan, seperti halaman log masuk, halaman utama, halaman pengguna, dll.

4. Paparan laluan

Paparan laluan ialah komponen fungsinya adalah untuk memaparkan komponen yang sepadan secara dinamik apabila laluan berubah.

2. Tiga cara untuk melompat dalam Penghala Vue

Dalam Penghala Vue, kita boleh melaksanakan lompatan dalam tiga cara berikut:

1. Navigasi Deklaratif

menggunakan teg pautan penghala untuk mencapai lonjakan, yang boleh menukar peristiwa klik pengguna kepada penukaran penghalaan dalam program. Menggunakan navigasi deklaratif mengelakkan beberapa masalah memanipulasi URL secara langsung dan menggunakan teg .

Contoh kod:

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

2. Navigasi terprogram

Panggil objek $router dalam kaedah acara, menggunakan tolak atau ganti kaedah Lompat ke halaman yang ditentukan. Navigasi terprogram boleh digunakan untuk mengawal tingkah laku lompat laluan dengan mudah, dan objek $route boleh digunakan untuk mengakses parameter laluan dan mengendalikan secara fleksibel apabila membuat lompatan.

Contoh kod:

<template>
  <div>
    <button @click="toHome">to Home</button>
    <button @click="toAbout">to About</button>
  </div>
</template>

<script>
export default {
  methods: {
    toHome(){
      this.$router.push('/')
    },
    toAbout(){
      this.$router.push('/about')
    }
  }
}
</script>

3. Ubah hala

Ubah hala bermaksud laluan melompat ke halaman lain sebelum melompat ke halaman yang ditentukan. Kami boleh menggunakan kaedah ubah hala untuk melaksanakan ubah hala, yang boleh mengetepikan beberapa langkah perantaraan yang tidak perlu dan terus mengakses halaman yang kami perlukan.

Contoh kod:

const routes = [
  { path: '/', redirect: '/home' },
  { path: '/home', component: Home },
  { path: '/about', component: About }
]

3. Lulus parameter Vue Router

Dalam pembangunan aplikasi web, kita sering perlu menghantar parameter antara laluan mengikut Parameter yang berbeza untuk memaparkan halaman yang berbeza. Dalam Penghala Vue, kita boleh menghantar parameter antara laluan dalam dua cara: penghalaan dinamik dan parameter pertanyaan.

1. Penghalaan dinamik

Penghalaan dinamik merujuk kepada menambah parameter khusus pada laluan dan kemudian menggunakan parameter ini untuk mengawal gelagat halaman. Kaedah penghantaran parameter penghalaan dinamik adalah agak fleksibel, dan nilai parameter boleh dikemas kini pada bila-bila masa apabila laluan berubah.

Contoh kod:

// 配置路由
const router = new Router({
  routes: [
    {
      path: '/goods/:id',
      name: 'goods',
      component: () => import('@/views/Goods'),
    }
  ]
})

// 带参跳转
this.$router.push({
  name: 'goods',
  params: {
    id: 1
  }
})

// 获取参数值
this.$route.params.id

2. Parameter pertanyaan

Parameter pertanyaan merujuk kepada penambahan ?key=value pada URL untuk menghantar parameter tertentu. Kaedah menghantar parameter pertanyaan agak mudah, dan nilai parameter boleh diperoleh dan dikemas kini melalui objek $route.

Contoh kod:

// 获取参数值
this.$route.query.key

// 更新参数值
this.$router.push({
  path: '/test',
  query: {
    key: 'value'
  }
})

Ringkasan

Artikel ini terutamanya memperkenalkan konsep asas Vue Router, tiga cara penghalaan lompatan dan dua cara parameter lulus Way. Dalam aplikasi praktikal, kita boleh menggunakan kaedah yang berbeza untuk mengawal dan mengurus penghalaan mengikut keperluan yang berbeza. Saya berharap pengenalan dalam artikel ini dapat membantu semua orang lebih memahami cara menggunakan Penghala Vue.

Atas ialah kandungan terperinci Bagaimana untuk melaksanakan lompat dalam penghala vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!