Masalah yang dihadapi dalam laluan parameter laluan dan pengawalan laluan apabila menggunakan pembangunan Vue

Vue ialah rangka kerja pembangunan bahagian hadapan berasaskan JavaScript yang membantu pembangun membina antara muka pengguna yang cekap, fleksibel dan berskala. Semasa proses pembangunan Vue, parameter penghalaan dan pengawal penghalaan adalah beberapa masalah biasa. Artikel ini menerangkan isu ini dan menyediakan contoh kod khusus.

1. Masalah lulus parameter penghalaan
Dalam Vue, laluan parameter penghalaan bermakna menghantar beberapa data ke halaman sasaran semasa halaman melompat. Senario biasa termasuk pengguna mengklik item pada halaman senarai dan kemudian melompat ke halaman butiran, dan menghantar maklumat tentang item yang sepadan ke halaman butiran. Apabila melaksanakan lulus parameter laluan, anda boleh menggunakan param atau pertanyaan Vue Router untuk menghantar parameter.

1. Gunakan params untuk menghantar parameter
   params ialah cara untuk menghantar parameter ke halaman sasaran dalam bentuk laluan dinamik Ia sesuai untuk situasi di mana parameter perlu disertakan dalam URL. Berikut ialah kod sampel:

// 路由配置
const router = new VueRouter({
  routes: [
    {
      path: '/detail/:id',
      component: Detail
    }
  ]
})

// 列表页
<template>
  <div>
    <ul>
      <li v-for="item in itemList" :key="item.id">
        <router-link :to="'/detail/' + item.id">{{ item.name }}</router-link>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  data() {
    return {
      itemList: [
        { id: 1, name: '项目1' },
        { id: 2, name: '项目2' },
        { id: 3, name: '项目3' },
      ]
    }
  }
}
</script>

// 详情页
<template>
  <div>
    <h2>{{ project.name }}</h2>
    <p>{{ project.description }}</p>
  </div>
</template>
<script>
export default {
  data() {
    return {
      project: {}
    }
  },
  mounted() {
    // 获取params参数
    const id = this.$route.params.id;
    // 根据id去获取具体项目信息，这里为了简化，直接从itemList中查找
    this.project = this.itemList.find(item => item.id === Number(id));
  }
}
</script>

2. Gunakan pertanyaan untuk menghantar parameter
   pertanyaan ialah cara untuk menambahkan parameter pada URL dalam bentuk pasangan nilai kunci Ia sesuai untuk situasi di mana terdapat banyak atau lebih parameter yang kompleks . Berikut adalah contoh kod:

// 路由配置
const router = new VueRouter({
  routes: [
    {
      path: '/detail',
      component: Detail
    }
  ]
})

// 列表页
<template>
  <div>
    <ul>
      <li v-for="item in itemList" :key="item.id">
        <router-link :to="{ path: '/detail', query: { id: item.id }}">{{ item.name }}</router-link>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  data() {
    return {
      itemList: [
        { id: 1, name: '项目1' },
        { id: 2, name: '项目2' },
        { id: 3, name: '项目3' },
      ]
    }
  }
}
</script>

// 详情页
<template>
  <div>
    <h2>{{ project.name }}</h2>
    <p>{{ project.description }}</p>
  </div>
</template>
<script>
export default {
  data() {
    return {
      project: {}
    }
  },
  mounted() {
    // 获取query参数
    const id = this.$route.query.id;
    // 根据id去获取具体项目信息，这里为了简化，直接从itemList中查找
    this.project = this.itemList.find(item => item.id === Number(id));
  }
}
</script>

2. Masalah pengawal laluan
Pengawal laluan merujuk kepada fungsi melakukan beberapa operasi sebelum dan selepas lompat laluan. Dalam Penghala Vue, keperluan yang berbeza boleh dicapai melalui pengawal hadapan global, pengawal pos global dan pengawal dalam komponen.

1. Pengawal hadapan global
   Pengadang hadapan global boleh melakukan beberapa operasi sebelum sebarang lompatan laluan, seperti mengesahkan kebenaran pengguna atau merekod tingkah laku pengguna. Berikut ialah contoh kod:

// 路由守卫配置
router.beforeEach((to, from, next) => {
  // 判断用户是否处于登录状态
  const isLogged = checkLogin();
  
  if (to.meta.authRequired && !isLogged) {
    // 需要登录才能访问的页面
    next('/login');
  } else {
    next();
  }
});

2. Pengawal pos global
   Pengawal pos global boleh melakukan beberapa operasi selepas sebarang lompatan laluan, seperti merakam gelagat pengguna atau mengira paparan halaman. Berikut ialah contoh kod:

// 路由守卫配置
router.afterEach((to, from) => {
  // 统计页面浏览量
  recordPageView();
});

3. Pengawal dalam komponen
   Pengawal dalam komponen boleh melakukan operasi khusus pada komponen semasa, seperti menyimpan data yang dimasukkan pengguna atau menyemak sama ada borang telah dilengkapkan sebelum komponen dimusnahkan. Berikut ialah kod sampel:

// 组件内的守卫配置
export default {
  beforeRouteLeave(to, from, next) {
    if (this.isDirty) {
      // 提示用户保存未保存的数据
      const confirmed = window.confirm('是否保存未提交的数据？');

      if (confirmed) {
        // 保存数据
        this.saveData();
      }
    }

    next();
  }
}

Di atas adalah penyelesaian kepada masalah penghalaan parameter penghalaan dan pengawal penghalaan yang dihadapi dalam pembangunan Vue. Dengan menggunakan param atau pertanyaan untuk lulus parameter, dan menggabungkan pra-pengawal global, pasca-pengawal global dan pengawal dalam komponen, lompatan dan operasi laluan yang lebih fleksibel dan selamat boleh dicapai. Semoga artikel ini dapat membantu anda.

Atas ialah kandungan terperinci Masalah yang dihadapi dalam laluan parameter laluan dan pengawalan laluan apabila menggunakan pembangunan Vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!