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 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:

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:

1. Pemaparan bersyarat

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

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

2. 4. Ringkasan

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!