Cara melaksanakan penghalaan dinamik dan pengawal penghalaan dalam Vue

Cara melaksanakan penghalaan dinamik dan pengawal penghalaan dalam Vue

Dalam Vue, penghalaan ialah konsep yang sangat penting, yang berkaitan dengan lonjakan halaman, kawalan kebenaran, dsb. Artikel ini akan memperkenalkan cara melaksanakan penghalaan dinamik dan pengawal penghalaan serta memberikan contoh kod khusus.

1. Penghalaan dinamik

Penghalaan dinamik merujuk kepada penjanaan konfigurasi penghalaan yang berbeza berdasarkan keadaan atau parameter yang berbeza. Penghalaan dinamik Vue dilaksanakan menggunakan Penghala Vue.

1. Pasang Vue Router

Mula-mula, kita perlu memasang Vue Router. Jalankan arahan berikut dalam direktori akar projek:

npm install vue-router

2. Konfigurasikan fail penghalaan

Buat direktori penghala dalam direktori src projek dan buat fail index.js dalam direktori untuk mengkonfigurasi penghalaan.

// router/index.js
import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

export default new Router({
  routes: []
})

4. Menjana laluan secara dinamik

Kami boleh mendapatkan konfigurasi penghalaan dinamik melalui antara muka hujung belakang atau kaedah lain, dan kemudian menambahkannya pada konfigurasi penghalaan.

// router/index.js
import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

const router = new Router({
  routes: []
})

// 获取动态路由配置
// 假设通过接口获取到的路由数据为response.data
const dynamicRoutes = response.data

// 添加动态路由
router.addRoutes(dynamicRoutes)

export default router

Dengan kod di atas, kami boleh menjana laluan secara dinamik berdasarkan data yang dikembalikan oleh antara muka latar belakang dan menambahkannya pada konfigurasi Penghala Vue.

2. Pengawal laluan

Pengawal laluan boleh digunakan untuk mengawal akses pengguna ke laluan tertentu Sebagai contoh, pengguna perlu log masuk sebelum mereka boleh mengakses halaman tertentu. Penghala Vue menyediakan fungsi pengawal laluan.

Pertama sekali, kita perlu memahami beberapa konsep yang berkaitan dengan pengawal laluan:

• Pra-pengawal global: dilaksanakan sebelum penukaran penghalaan, ia boleh digunakan untuk kawalan kebenaran global dan operasi lain.
• Pengawal eksklusif laluan: Ia hanya sah untuk laluan tertentu dan boleh digunakan untuk kawalan kebenaran tempatan dan operasi lain.
• Pengawal dalam komponen: Hanya sah untuk komponen tertentu, dan boleh digunakan untuk melaksanakan operasi seperti kawalan kebenaran dalam komponen.

1. Global front guard

Kita boleh menggunakan global guards dalam fail konfigurasi penghalaan (router/index.js). Contohnya, untuk melaksanakan kawalan kebenaran log masuk:

// router/index.js
import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

const router = new Router({
  routes: []
})

// 添加全局前置守卫
router.beforeEach((to, from, next) => {
  // 判断用户是否登录
  const isLogin = localStorage.getItem('isLogin')

  // 如果用户未登录，并且访问的页面需要登录权限，则跳转至登录页
  if (!isLogin && to.meta.requireAuth) {
    next('/login')
  } else {
    next()
  }
})

export default router

Dalam kod di atas, kami menambah pengawal hadapan global melalui kaedah router.beforeEach(). Dalam pengawal ini, kami menentukan sama ada pengguna telah log masuk dan membuat lompatan yang sepadan mengikut situasi yang berbeza. router.beforeEach()方法来添加全局前置守卫。在该守卫中，我们判断用户是否登录，并根据不同情况进行相应的跳转。

2. 路由独享守卫

除了全局前置守卫外，我们还可以为某个路由单独配置守卫。例如，实现管理员权限控制：

// router/index.js
import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

const router = new Router({
  routes: [
    {
      path: '/admin',
      component: AdminComponent,
      meta: { requireAdmin: true } // 设置路由元信息
    }
  ]
})

export default router

// router/index.js
import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

const router = new Router({
  routes: [
    {
      path: '/admin',
      component: AdminComponent,
      meta: { requireAdmin: true } // 设置路由元信息
    }
  ]
})

// 添加全局前置守卫
router.beforeEach((to, from, next) => {
  // 判断用户是否为管理员
  const isAdmin = localStorage.getItem('isAdmin')

  // 如果用户不是管理员，并且访问的页面需要管理员权限，则跳转至首页
  if (!isAdmin && to.meta.requireAdmin) {
    next('/')
  } else {
    next()
  }
})

export default router

在以上代码中，我们给/admin路由配置了元信息meta.requireAdmin

Pengawal eksklusif untuk laluan

Selain pengawal hadapan global, kami juga boleh mengkonfigurasi pengawal berasingan untuk laluan tertentu. Contohnya, untuk melaksanakan kawalan kebenaran pentadbir:

// router/index.js
import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

const router = new Router({
  routes: []
})

export default router

// App.vue
<template>
  <div>
    <!-- 页面内容 -->
  </div>
</template>

<script>
export default {
  // 组件内的守卫：每次路由切换后滚动到顶部
  beforeRouteUpdate(to, from, next) {
    window.scrollTo(0, 0)
    next()
  }
}
</script>

Dalam kod di atas, kami mengkonfigurasi maklumat meta meta.requireAdmin untuk laluan /admin untuk menentukan bahawa halaman memerlukan kebenaran pentadbir. Kemudian, gunakan pengawal hadapan global untuk menentukan sama ada pengguna ialah pentadbir, dan buat lompatan yang sepadan.

Pengawal dalam komponen

🎜🎜Selain pengawal hadapan global dan pengawal eksklusif laluan, Vue Router juga menyediakan pengawal dalam komponen. Contohnya, untuk mengawal tingkah laku menatal halaman: 🎜rrreeerrreee🎜Dalam kod di atas, kami menggunakan kaedah beforeRouteUpdate() dalam komponen App.vue untuk menatal halaman ke atas selepas setiap suis laluan. 🎜🎜Ringkasan: Artikel ini memperkenalkan cara melaksanakan penghalaan dinamik dan pengawal penghalaan dalam Vue dan memberikan contoh kod khusus. Penghalaan dinamik boleh menjana laluan yang berbeza dengan mendapatkan konfigurasi penghalaan dinamik. Pengawal laluan boleh digunakan untuk mengawal akses pengguna ke laluan tertentu, termasuk pengawal hadapan global, pengawal eksklusif laluan dan pengawal dalam komponen. Pelaksanaan fungsi ini sangat penting untuk membina aplikasi bahagian hadapan yang kompleks. 🎜

Atas ialah kandungan terperinci Cara melaksanakan penghalaan dinamik dan pengawal penghalaan dalam Vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!