Bincangkan sebab dan penyelesaian mengapa lompatan penghalaan Vue tidak berguna

Dengan pembangunan berterusan teknologi bahagian hadapan, Vue, sebagai rangka kerja JavaScript sumber terbuka yang popular, semakin ramai orang mula menggunakannya untuk membina aplikasi bahagian hadapan mereka sendiri. Walau bagaimanapun, semasa proses pembangunan Vue, sesetengah orang mungkin menghadapi lompatan penghalaan yang tidak sah. Artikel ini akan meneroka sebab mengapa lompatan penghalaan Vue tidak berguna dan penyelesaiannya.

1. Sahkan sama ada laluan diperkenalkan dengan betul

Sebelum menggunakan Vue-Router, anda perlu memasangnya terlebih dahulu dan memperkenalkan laluan ke dalam projek. Jika laluan tidak diimport dengan betul, lompatan laluan secara semula jadi akan menjadi tidak sah. Untuk menggunakan fungsi yang disediakan oleh Vue-Router, anda perlu memasangnya melalui npm atau yarn, rujuk dan buat contoh Vue-Router dalam projek. Berikut ialah contoh kod untuk memperkenalkan Vue-Router:

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

// 在Vue实例中使用VueRouter插件
Vue.use(VueRouter)

const router = new VueRouter({
  mode: 'history', // 使用HTML5 History模式，去掉URL中的#号
  routes: [
    {
      path: '/', // 路由路径
      component: Home // 组件，此处是Home组件
    },
    {
      path: '/about',
      component: About
    },
    // ...
  ]
})

// 在Vue实例中添加router选项
new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

Dalam kod permulaan penghalaan, kita perlu menentukan hubungan yang sepadan antara laluan penghalaan dan komponen supaya ia boleh melompat dengan betul apabila mengklik pautan. Jika maklumat penghalaan tidak betul atau tiada, lompatan penghalaan akan menjadi tidak sah. Anda boleh menyemak sama ada laluan aplikasi dimulakan dengan betul melalui jadual cincang laluan.

2. Cuba lompat laluan secara manual

Jika lompatan masih tidak dapat dilakukan selepas laluan diperkenalkan, maka kita boleh cuba lompat laluan secara manual. Lompatan manual membolehkan contoh Vue menetapkan semula laluan secara dinamik selepas pemaparan halaman selesai untuk mencapai tujuan lompatan.

Kod sampel untuk penghalaan lompatan manual adalah seperti berikut:

export default {
  methods: {
    jumpTo(path) {
      this.$router.push({ path })
    }
  }
}

Tentukan kaedah jumpTo dalam komponen Vue sedia ada, dan laksanakan lompatan ke sasaran melalui penghalaan kaedah. push

Jika lompatan manual berjaya, tetapi lompatan melalui teg

gagal, maka anda perlu menyemak sama ada teg router-link digunakan dengan betul. router-link

Semak
3. router-link

ialah arahan lompat laluan yang disediakan oleh Vue-Router Anda boleh menggunakannya untuk melompat ke laluan sasaran dengan mudah. Walau bagaimanapun, apabila menggunakan router-link, mungkin juga terdapat masalah kegagalan lompatan. Pada masa ini, anda perlu menyemak sama ada penggunaan router-link adalah betul. router-link

Berikut ialah contoh kod untuk

: router-link

<router-link to="/user">用户中心</router-link>

's router-link atribut menentukan laluan untuk melompat ke, dan nilainya hendaklah penunjuk ke laluan sasaran Laluan relatif atau laluan mutlak. to

Jika laluan penghalaan adalah betul, tetapi

masih tidak boleh diubah hala, anda boleh mempertimbangkan untuk menggunakan teg router-link asli dan bukannya a, atau semak perbezaan antara komponen router-link dan Versi Vue-Router Isu keserasian. router-link

Semak pengawal navigasi laluan

Dalam Vue-Router, pengawal navigasi laluan boleh memintas lompatan laluan dan melaksanakan beberapa fungsi tersuai, seperti pengesahan pengguna untuk penghalaan, Kebenaran pengesahan, dsb. Semasa proses pembangunan, lompatan penghalaan mungkin gagal disebabkan isu konfigurasi dengan pengawal navigasi. Oleh itu, kita juga perlu menyemak konfigurasi pengawal navigasi laluan.

Pengawal navigasi laluan termasuk

, beforeEach dan beforeResolve Pengawal ini akan dicetuskan sebelum, antara dan selepas penukaran laluan. Jika pemasaan pencetus dan logik pemprosesan pengawal tidak dapat dikonfigurasikan dengan betul, lompatan laluan mungkin gagal. afterEach

Berikut ialah contoh kod untuk pengawal navigasi penghalaan:

router.beforeEach((to, from, next) => {
  if (to.path === '/login') {
    next()
    return
  }
  // 判断用户是否登录
  if (store.state.isLogin) {
    next()
    return
  }
  next('/login')
})

Dalam kod sampel ini, jika pengguna melompat ke halaman

, maka ia akan melompat terus tanpa sebarang pemprosesan. Jika pengguna tidak log masuk, kemudian lompat ke halaman log masuk. /login

Jika lompatan laluan anda tidak berguna, anda juga boleh menyemak sama ada pengawal navigasi dikonfigurasikan dengan betul atau nyahdayakan pengawal sementara semasa proses penyahpepijatan untuk melihat sama ada masalah itu boleh diselesaikan.

Ringkasan

Lompatan laluan ialah salah satu fungsi biasa dalam aplikasi web Sebagai penyelesaian penghalaan biasa dalam rangka kerja bahagian hadapan, Vue-Router juga mempunyai beberapa masalah biasa. Artikel ini memperkenalkan empat sebab yang boleh menyebabkan lompatan penghalaan Vue menjadi tidak sah.

Sesetengah penyelesaian biasa termasuk penghalaan lompatan manual, menyemak sama ada terdapat masalah dengan penggunaan komponen

dan konfigurasi pengawal navigasi. Jika anda menghadapi masalah berkaitan lompatan penghalaan lain, anda boleh mencuba penyelesaian yang berbeza berdasarkan situasi sebenar. router-link

Atas ialah kandungan terperinci Bincangkan sebab dan penyelesaian mengapa lompatan penghalaan Vue tidak berguna. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!