Apakah yang perlu saya lakukan jika vue tidak melompat apabila menggunakan penghala?

Dalam Vue, penghala ialah alat pengurusan penghalaan yang biasa digunakan, yang boleh merealisasikan lonjakan halaman dan bertukar dengan mudah dalam aplikasi satu halaman (SPA). Tetapi kadang-kadang terdapat masalah yang Vue tidak melompat apabila menggunakan penghala Kami perlu mengumpul beberapa pengalaman dan kemahiran semasa proses pembangunan untuk menyelesaikan masalah ini.

1 Periksa konfigurasi penghalaan

Jika Vue tidak melompat menggunakan penghala, anda perlu menyemak sama ada konfigurasi penghalaan adalah betul. Dalam Vue, konfigurasi penghalaan terutamanya merangkumi aspek berikut:

1. Membuat tika Vue Router

Dalam router.js, kita perlu mencipta tika Vue Router dan mengkonfigurasi penghalaan maklumat. Contohnya:

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

const router = new Router({
  mode: 'history',
  routes: [
    {
      path: '/',
      component: Home
    },
    {
      path: '/about',
      component: About
    }
  ]
})

export default router

Dalam contoh ini, kami menggunakan kaedah Vue.use() untuk memasang pemalam Penghala, kemudian mencipta tika Penghala dan mengkonfigurasi maklumat penghalaan. Antaranya, atribut laluan digunakan untuk menentukan peraturan penghalaan tertentu, atribut laluan digunakan untuk menentukan laluan penghalaan, dan atribut komponen digunakan untuk menentukan komponen yang sepadan dengan laluan.

2. Daftar contoh penghalaan

Dalam App.vue, kita perlu mendaftarkan tika Vue Router yang dibuat ke dalam tika Vue. Contohnya:

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

<script>
import router from './router'

export default {
  name: 'App',
  router
}
</script>

Dalam contoh ini, kami melekapkan tika penghala yang dibuat ke tika akar Vue.

Jika konfigurasi penghalaan betul, kita boleh cuba menjalankan semula projek untuk melihat sama ada penghalaan boleh melompat seperti biasa.

2. Cara menyemak lompatan laluan

Jika konfigurasi penghalaan disemak dengan betul, anda juga perlu menyemak kaedah lompat laluan. Terdapat terutamanya kaedah berikut untuk menghalakan lompatan:

1. Gunakan teg ialah teg biasa yang digunakan untuk melompat ke halaman. Contohnya:

Apabila menggunakan teg laluan sasaran, yang boleh menjadi rentetan Atau objek; gantikan atribut dinyatakan pada masa yang sama, penghalaan Ia tidak akan direkodkan dalam sejarah, dan fungsi belakang halaman boleh direalisasikan

<router-link to="/about">关于我们</router-link>

Jika atribut kelas kepada dan aktif ditentukan pada masa yang sama , kelas CSS yang ditentukan akan ditambahkan secara automatik pada elemen semasa apabila navigasi berjaya.

Jika teg digunakan secara tidak wajar, laluan mungkin tidak diubah hala. Sebagai contoh, laluan laluan sasaran tidak ditentukan menggunakan atribut kepada, atau laluan yang ditentukan adalah salah.
• Gunakan navigasi program
• Dalam Vue, kami juga boleh menggunakan navigasi program untuk mencapai lompatan halaman. Contohnya:

Apabila menggunakan navigasi program, anda perlu memberi perhatian kepada perkara berikut:

Cara untuk melompat ke halaman boleh tolak, ganti, pergi , belakang, dsb.;
2. Jika laluan lompat ialah objek, anda perlu menentukan atribut seperti laluan, pertanyaan, cincang dan param dalam objek untuk menentukan laluan, parameter pertanyaan, serpihan cincang, dsb. . laluan sasaran;

Jika laluan lompat ialah laluan bernama, atribut nama perlu dinyatakan dalam objek.

this.$router.push('/about')

Jika parameter yang diluluskan semasa menggunakan navigasi program adalah salah, laluan mungkin tidak diubah hala.

3. Semak syarat untuk lompat laluan
• Jika kaedah lompat laluan adalah betul, anda juga perlu menyemak syarat untuk lompat laluan. Berikut ialah beberapa syarat yang boleh menjejaskan lompatan laluan:
• Pengawal Laluan

Dalam Vue, pengawal laluan ialah mekanisme yang digunakan untuk mengawal lompatan laluan. Dalam pengawal laluan, kita boleh memutuskan sama ada untuk membenarkan lompatan laluan berdasarkan situasi yang berbeza. Contohnya:

Dalam contoh ini, kami menggunakan pengawal penghalaan beforeEach untuk menentukan sama ada halaman memerlukan log masuk untuk mengakses. Jika log masuk diperlukan dan pengguna semasa tidak log masuk, ia akan melompat ke halaman log masuk.

Semasa penggunaan pengawal laluan, jika nilai pulangan tidak betul, laluan mungkin tidak diubah hala.

1. Pemaparan bersyarat

Dalam Vue, pemaparan bersyarat ialah mekanisme yang digunakan untuk mengawal paparan dan penyembunyian elemen halaman. Dalam pemaparan bersyarat, kita boleh memutuskan sama ada elemen perlu dipaparkan berdasarkan situasi yang berbeza. Contohnya:

const router = new VueRouter({
  routes: [...],
})

router.beforeEach((to, from, next) => {
  if (to.meta.requiresAuth) {
    // 判断是否需要登录
    if (sessionStorage.getItem('isLogin')) {
      next()
    } else {
      next('/login')
    }
  } else {
    next()
  }
})

Dalam contoh ini, kami menggunakan arahan v-jika untuk menentukan sama ada pengguna semasa dilog masuk. Jika anda log masuk, pautan "Perihal Kami" akan dipaparkan.

Semasa penggunaan pemaparan bersyarat, jika syarat penghakiman tidak betul, elemen itu mungkin tidak dipaparkan atau melompat.

2. 4. Ringkasan

Masalah Vue tidak melompat apabila menggunakan penghala mungkin disebabkan oleh konfigurasi penghalaan, kaedah lompat, keadaan lompat dan sebab lain. Kita perlu meneliti dengan teliti proses penggunaan penghalaan untuk mencari masalah. Pada masa yang sama, kami juga perlu mengumpul lebih banyak pengalaman dan kemahiran dalam menggunakan Penghala Vue untuk menangani masalah ini dengan lebih baik.

Atas ialah kandungan terperinci Apakah yang perlu saya lakukan jika vue tidak melompat apabila menggunakan penghala?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!