Penjelasan terperinci tentang pengawal penghalaan Vue dan analisis senario aplikasinya

Dengan pembangunan berterusan teknologi hadapan, Vue sebagai rangka kerja pembangunan menjadi semakin popular di kalangan pembangun. Mekanisme penghalaan Vue juga merupakan sebahagian daripada rangka kerja Vue. Sistem penghalaan boleh membantu pembangun membina aplikasi satu halaman yang kompleks di samping menyediakan cara yang fleksibel untuk mengurus keadaan halaman dan navigasi pengguna. Dalam kes ini, pengawal penghalaan Vue menjadi titik pengetahuan yang mesti dikuasai.

Jadi, apakah pengawal laluan Vue? Dalam Vue.js, pengawal laluan ialah mekanisme yang digunakan untuk mengawal lompatan antara halaman Ia digunakan terutamanya untuk operasi seperti pengesahan kebenaran dan pengurusan status semasa navigasi halaman. Pengawal laluan Vue terutamanya dibahagikan kepada tiga jenis: pengawal laluan global, pengawal eksklusif laluan dan pengawal peringkat komponen.

Pengawal laluan global:

Pengawal laluan global bermaksud blok kod yang mesti dilaksanakan apabila semua laluan berubah. Terdapat tiga jenis utama pengawal laluan global:

1. sebelumSetiap(ke, dari, seterusnya)

dipanggil sebelum laluan masuk dan lain-lain operasi di sini Parameter ke dan dari mewakili objek penghalaan yang akan masuk dan akan keluar masing-masing.

Kod sampel adalah seperti berikut:

router.beforeEach((to, from, next) => {
  // 进行权限验证等操作
  if (to.meta.requireAuth) {
    if (localStorage.getItem('token')) {
      next();
    } else {
      next({
        path: '/login',
        query: {redirect: to.fullPath}
      })
    }
  } else {
    next();
  }
})

2. afterEach(to, from)

dipanggil selepas laluan masuk dan biasanya digunakan untuk pembalakan dan operasi lain.

Kod sampel adalah seperti berikut:

router.afterEach((to, from) => {
  // 记录日志等操作
})

3. beforeResolve(to, from, next)

dipanggil selepas laluan dihuraikan, hanya malas memuatkan digunakan Kadangkala berguna.

Kod contoh adalah seperti berikut:

router.beforeResolve((to, from, next) => {
  // 进行路由解析后的处理
  next();
})

Pengawal eksklusif laluan:

Pengawal eksklusif laluan ialah pengawal untuk laluan tertentu Ia hanya dikawal apabila laluan semasa masuk atau meninggalkan panggilan. Penggunaannya adalah seperti berikut:

Kod sampel adalah seperti berikut:

const router = new VueRouter({
  routes: [
    {
      path: '/admin',
      component: Admin,
      beforeEnter: (to, from, next) => {
        // 进行权限验证等操作
        if (localStorage.getItem('admin')) {
          next();
        } else {
          next({
            path: '/login',
            query: {redirect: to.fullPath}
          })
        }
      }
    }
  ]
})

Pengawal aras komponen:

Pengawal aras komponen merujuk kepada pengawal navigasi di dalam komponen dan boleh digunakan untuk menguruskan keadaan dalaman komponen. Terdapat terutamanya empat jenis pengawal di peringkat komponen:

1. sebelumRouteEnter(ke, dari, seterusnya)

dipanggil sebelum kemasukan laluan dan digunakan apabila mengakses dalaman keadaan komponen.

Kod sampel adalah seperti berikut:

export default {
  data() {
    return {
      user: null
    }
  },
  beforeRouteEnter(to, from, next) {
    const user = localStorage.getItem('user')
    if (user) {
      // 访问不到组件实例
      next(vm => {
        vm.user = user
      })
    } else {
      next({
        path: '/login',
        query: {redirect: to.fullPath}
      })
    }
  }
}

2. sebelumRouteLeave(ke, dari, seterusnya)

dipanggil sebelum laluan keluar dan boleh digunakan untuk mengesahkan sama ada untuk meninggalkan laluan semasa atau menyimpan operasi pengubahsuaian.

Kod sampel adalah seperti berikut:

export default {
  data() {
    return {
      text: ''
    }
  },
  beforeRouteLeave(to, from, next) {
    if (this.text !== '') {
      const confirmMsg = '您的修改还未保存，确定要离开吗？'
      if (confirm(confirmMsg)) {
        next();
      } else {
        next(false);
      }
    } else {
      next();
    }
  }
}

3. sebelumRouteUpdate(ke, dari, seterusnya)

Dipanggil apabila laluan semasa dikemas kini, digunakan untuk kemas kini keadaan dalaman komponen .

Kod sampel adalah seperti berikut:

export default {
  data() {
    return {
      user: null
    }
  },
  beforeRouteUpdate(to, from, next) {
    const user = localStorage.getItem('user')
    if (user) {
      this.user = user
      next();
    } else {
      next({
        path: '/login',
        query: {redirect: to.fullPath}
      })
    }
  }
}

4. sebelumRouteLeave(ke, dari, seterusnya)

dipanggil semasa rendering laluan dan boleh digunakan untuk pemaparan sebelah pelayan Tunggu operasi.

Kod sampel adalah seperti berikut:

export default {
  beforeRouteRender(to, from, next) {
    // 进行服务器端渲染等操作
    next();
  }
}

Melalui pengenalan pengawal penghalaan di atas, kita dapati bahawa pengawal penghalaan mempunyai banyak senario aplikasi, seperti menentukan sama ada untuk log masuk, melaksanakan pengesahan kebenaran , menyimpan operasi pengubahsuaian, dsb. Senario yang berbeza memerlukan penggunaan pengawal penghalaan yang berbeza, dan anda perlu memilih pengawal yang sesuai untuk diproses semasa pembangunan.

Ringkasnya, pengawal laluan Vue adalah bahagian yang sangat penting, jika digunakan dengan betul, ia boleh meningkatkan keselamatan dan kestabilan aplikasi dengan banyak. Oleh itu, pembangun perlu mempunyai pemahaman yang lebih mendalam tentang penggunaan dan senario aplikasi pengawal laluan.

Atas ialah kandungan terperinci Penjelasan terperinci tentang pengawal penghalaan Vue dan analisis senario aplikasinya. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!