Kawalan penghalaan dan teknologi pengurusan dalam Vue

Vue ialah rangka kerja bahagian hadapan yang sangat popular Ia menyediakan pengurus penghalaan untuk kawalan dan pengurusan penghalaan yang mudah. Dalam artikel ini, kami akan menyelidiki kawalan penghalaan dan teknologi pengurusan dalam Vue untuk membantu pembangun lebih memahami dan menggunakan teknologi ini.

1. Asas Vue Router

Vue Router ialah pengurus penghalaan rasmi Vue.js Ia disepadukan secara mendalam dengan teras Vue.js dan boleh melaksanakan kawalan penghalaan aplikasi satu halaman dengan baik. Penghala Vue melaksanakan kemas kini paparan dinamik dengan mengurus pemetaan antara laluan dan komponen, mengasingkan pandangan dan keadaan data dengan berkesan, menjadikan struktur aplikasi lebih jelas dan lebih mudah diselenggara.

1.1 Pemasangan dan pengenalan

Sebelum menggunakan Vue Router, anda perlu memasangnya melalui npm. Anda boleh memasangnya melalui arahan berikut:

npm install vue-router –save

Selepas pemasangan selesai, anda perlu memperkenalkan Penghala Vue ke dalam aplikasi Vue dan melakukan konfigurasi asas. Anda boleh menulis kod berikut dalam fail main.js:

import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './App.vue'

Vue.use(VueRouter)

const routes = [{
  path: '/home',
  name: 'home',
  component: () => import('./pages/Home.vue')
}, {
  path: '/about',
  name: 'about',
  component: () => import('./pages/About.vue')
}, {
  path: '/contact',
  name: 'contact',
  component: () => import('./pages/Contact.vue')
}, {
  path: '*',
  redirect: '/home'
}]

const router = new VueRouter({
  mode: 'hash', // hash模式
  routes // 路由路径配置
})

new Vue({
  el: '#app',
  router, // 注册路由器
  render: h => h(App)
})

1.2 Navigasi Laluan

Vue Router menyediakan berbilang cara navigasi laluan, termasuk menggunakan teg pautan penghala untuk menavigasi, melompat halaman, menunggu navigasi selesai, dsb. .

Menggunakan teg pautan penghala dalam komponen boleh melaksanakan navigasi laluan dengan mudah, seperti yang ditunjukkan di bawah:

<router-link to="/home">首页</router-link>
<router-link to="/about">关于我们</router-link>
<router-link to="/contact">联系我们</router-link>

Selain itu, navigasi terprogram juga boleh digunakan untuk melaksanakan lompatan laluan, seperti yang ditunjukkan di bawah:

// 基本路由跳转
this.$router.push('/home')

// 带参数的路由跳转
this.$router.push({
  name: 'about',
  params: {
    id: 20,
    name: '张三'
  }
})

// 跳转后执行异步操作
this.$router.push('/about', () => {
  console.log('路由跳转完成')
})

// 返回前一个路由
this.$router.go(-1)

// 返回到命名路由
this.$router.push({
  name: 'home'
})

1.3 Bersarang laluan

Penghala Vue menyokong konfigurasi penghalaan bersarang berbilang peringkat, yang boleh mencapai kawalan dan pengurusan penghalaan yang lebih kompleks. Contohnya, anda boleh menentukan sub-laluan dan sub-laluan bersarang di bawah laluan induk, seperti yang ditunjukkan di bawah:

const routes = [{
  path: '/home',
  name: 'home',
  component: () => import('./pages/Home.vue')
}, {
  path: '/about',
  name: 'about',
  component: () => import('./pages/About.vue'),
  children: [{
    path: 'intro',
    name: 'about-intro',
    component: () => import('./pages/AboutIntro.vue')
  }, {
    path: 'contact',
    name: 'about-contact',
    component: () => import('./pages/AboutContact.vue')
  }]
}]

Dalam komponen penghalaan, anda boleh menggunakan teg 975b587bf85a482ea10b0a28848e78a4 Laluan induk ialah komponen, dan laluan anak dipaparkan dalam teg 975b587bf85a482ea10b0a28848e78a4 Penghala juga menyediakan beberapa fungsi lanjutan, seperti laluan parameter laluan, pengawal laluan, penghalaan dinamik, dsb. Dalam bahagian ini, kami menerangkan penggunaan dan pelaksanaan ciri ini.

2.1 Parameter penghalaan

Dalam pembangunan sebenar, biasanya perlu menghantar beberapa parameter kepada komponen penghalaan, seperti maklumat pengguna yang sedang log masuk, senarai artikel, dsb. Dalam Penghala Vue, parameter boleh dihantar melalui atribut props.

Seperti yang ditunjukkan di bawah, kami menggunakan atribut props untuk lulus parameter semasa menentukan laluan:

<template>
  <div>
    <h2>关于我们</h2>
    <ul>
      <li><router-link :to="{ name: 'about-intro' }">公司简介</router-link></li>
      <li><router-link :to="{ name: 'about-contact' }">联系我们</router-link></li>
    </ul>
    <router-view></router-view>
  </div>
</template>

Dalam komponen penghalaan, tetapkan props kepada benar untuk lulus parameter penghalaan sebagai atribut props komponen. Contohnya:

const routes = [
  {
    path: '/user/:userId',
    name: 'User',
    component: User,
    props: true
  }
]

Pada masa ini, parameter penghalaan akan dihantar kepada komponen Pengguna sebagai atribut pengguna, dan komponen boleh mendapatkan parameter ini melalui this.user.

2.2 Route Guard

Route guard ialah fungsi penting yang disediakan oleh Vue Router, yang boleh melakukan operasi seperti pengesahan kebenaran dan pertimbangan log masuk semasa proses lompat laluan. Penghala Vue menyediakan tiga jenis pengawal laluan: pengawal global, pengawal eksklusif laluan dan pengawal dalam komponen.

Pengawal global termasuk beforeEach, beforeResolve dan afterEach, yang dipintas sebelum lompatan laluan, selepas lompatan berjaya dan selepas keseluruhan proses penghalaan selesai. Contohnya:

<template>
  <div>
    <h2>User Details</h2>
    <p>{{ user.name }}</p>
    <p>{{ user.age }}</p>
  </div>
</template>

<script>
export default {
  props: ['user']
}
</script>

Pengawal eksklusif laluan boleh dikonfigurasikan apabila laluan ditakrifkan, atau ia boleh dikonfigurasikan di dalam komponen. Contohnya:

// 路由跳转前进行权限验证
router.beforeEach((to, from, next) => {
  if (to.meta.requiresAuth) {
    if (authService.isAuthenticated()) {
      next()
    } else {
      next({
        name: 'login'
      })
    }
  } else {
    next()
  }
})

Pengawal dalam komponen ialah fungsi beforeRouteEnter, beforeRouteUpdate dan beforeRouteLeave yang ditakrifkan dalam komponen penghalaan. Contohnya:

const router = new VueRouter({
  routes: [{
      path: '/admin',
      component: Admin,
      children: [
        {
          path: 'dashboard',
          component: Dashboard,
          beforeEnter: (to, from, next) => {
            if (authService.isAdmin()) {
              next()
            } else {
              next({
                name: 'login'
              })
            }
          }
        }]
      }]
 })

2.3 Penghalaan dinamik

Penghalaan dinamik merujuk kepada teknologi laluan padanan secara dinamik berdasarkan parameter URL. Penghala Vue menyediakan keupayaan padanan dinamik berdasarkan parameter penghalaan, dan boleh melakukan lompatan penghalaan dan pemaparan komponen berdasarkan parameter yang berbeza.

Sebagai contoh, semasa mentakrifkan laluan, anda boleh menentukan parameter dengan menggunakan titik bertindih ":", seperti yang ditunjukkan di bawah:

export default {
  beforeRouteEnter(to, from, next) {
    console.log('进入路由组件')
    next()
  },
  beforeRouteUpdate(to, from, next) {
    console.log('更新路由组件')
    next()
  },
  beforeRouteLeave(to, from, next) {
    console.log('离开路由组件')
    next()
  }
}

Di dalam komponen, anda boleh mendapatkan parameter laluan melalui ini.$route.params, seperti yang ditunjukkan di bawah :

const routes = [
  {
    path: '/posts/:postId',
    component: Post,
    props: true
  }
]

Semasa penghalaan, anda boleh menggunakan kaedah $router.push untuk melakukan padanan laluan dinamik, contohnya:

export default {
  mounted() {
    console.log('PostComponent: ' + this.$route.params.postId)
  }
}

IIIRingkasan

Artikel ini memperkenalkan penggunaan asas dan fungsi lanjutan Vue Router, termasuk navigasi laluan dan. sarang laluan , parameter penghalaan, pengawal penghalaan dan penghalaan dinamik, dsb. Vue Router ialah pengurus penghalaan yang penting dalam Vue.js, yang boleh membantu kami melaksanakan kawalan penghalaan dan pengurusan aplikasi bahagian hadapan dengan lebih baik. Saya harap artikel ini dapat memberi inspirasi kepada anda dan membantu anda menggunakan teknologi Vue Router dengan lebih baik untuk pembangunan.

Atas ialah kandungan terperinci Kawalan penghalaan dan teknologi pengurusan dalam Vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!