Problèmes rencontrés lors du passage des paramètres de route et de la garde de route lors de l'utilisation du développement Vue

Vue est un framework de développement front-end basé sur JavaScript qui aide les développeurs à créer des interfaces utilisateur efficaces, flexibles et évolutives. Au cours du processus de développement de Vue, les paramètres de routage et les gardes de routage constituent des problèmes courants. Cet article décrit ces problèmes et fournit des exemples de code spécifiques.

1. Problème de passage des paramètres de routage
Dans Vue, le passage des paramètres de routage signifie transmettre certaines données à la page cible pendant que la page saute. Les scénarios courants incluent que l'utilisateur clique sur un élément de la page de liste, puis accède à la page de détails et transmette les informations sur l'élément correspondant à la page de détails. Lors de l'implémentation du passage des paramètres de route, vous pouvez utiliser les paramètres ou la requête de Vue Router pour transmettre les paramètres.

1. Utiliser des paramètres pour transmettre des paramètres
   params est un moyen de transmettre des paramètres à la page cible sous la forme d'un chemin dynamique. Il convient aux situations où des paramètres doivent être inclus dans l'URL. Voici un exemple de code :

// 路由配置
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. Utiliser une requête pour transmettre des paramètres
   la requête est un moyen d'ajouter des paramètres à l'URL sous la forme de paires clé-valeur. Elle convient aux situations où il existe de nombreux paramètres ou plus complexes. . Voici un exemple de code :

// 路由配置
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. Problème de garde de route
Route guard fait référence à la fonction d'effectuer certaines opérations avant et après un saut de route. Dans Vue Router, différents besoins peuvent être satisfaits grâce à des gardes avant globales, des gardes de poste globales et des gardes au sein des composants.

1. Global Front Guard
   Global Front Guard peut effectuer certaines opérations avant tout saut d'itinéraire, telles que la vérification des autorisations de l'utilisateur ou l'enregistrement du comportement de l'utilisateur. Voici un exemple de code :

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

2. Global post guard
   Global post guard peut effectuer certaines opérations après tout saut d'itinéraire, comme enregistrer le comportement de l'utilisateur ou compter les pages vues. Voici un exemple de code :

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

3. Gardes au sein d'un composant
   Les gardes au sein d'un composant peuvent effectuer des opérations spécifiques sur le composant actuel, comme enregistrer les données saisies par l'utilisateur ou vérifier si le formulaire est rempli avant la destruction du composant. Voici un exemple de code :

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

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

    next();
  }
}

Ce qui précède est la solution aux problèmes de passage des paramètres de routage et de garde de routage rencontrés dans le développement de Vue. En utilisant des paramètres ou des requêtes pour transmettre des paramètres et en combinant des pré-gardes, des post-gardes et des gardes globales au sein des composants, des sauts d'itinéraire et des opérations plus flexibles et plus sécurisés peuvent être obtenus. J'espère que cet article pourra vous être utile.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!