Méthodes dynamiques d'ajout et de suppression d'itinéraires dans uniapp

Uniapp est un framework cross-end basé sur Vue.js. Il prend en charge l'écriture unique et génère en même temps des applications multi-fins telles que H5, des mini-programmes et des applications. Il accorde une grande attention aux performances et aux applications. efficacité du développement pendant le processus de développement. Dans Uniapp, l'ajout et la suppression dynamiques de routes est un problème souvent rencontré lors du processus de développement. Par conséquent, cet article présentera l'ajout et la suppression dynamiques de routes dans Uniapp et fournira des exemples de code spécifiques.

1. Ajout dynamique d'itinéraires

Ajout dynamique d'itinéraires peut être ajouté à la table de routage lorsque la page est chargée ou après une opération de l'utilisateur en fonction des besoins réels. Dans Uniapp, l'ajout dynamique de routes peut être réalisé via la méthode router.addRoutes() Le code spécifique est le suivant :

//获取路由对象
let router = this.$router

//新增路由
let routes = [{
  path: '/newPage',
  name: 'newPage',
  component: r => require.ensure([], () => r(require('@/pages/newPage/index')), 'newPage')
}]
router.addRoutes(routes)

Dans le code ci-dessus, la table de routage du projet actuel est obtenue en obtenant l'objet de routage, puis un nouvel objet de routage est défini et ajoutez-le à la table de routage. Parmi eux, le format d'un nouvel itinéraire est similaire à celui d'une définition d'itinéraire ordinaire. Il vous suffit de spécifier le chemin, le nom et le composant de l'itinéraire. Dans cet exemple de code, nous avons ajouté une nouvelle route nommée newPage à la table de routage et sa page correspondante est newPage.

2. Suppression dynamique des itinéraires

La suppression dynamique des itinéraires peut supprimer un itinéraire de la table de routage après que l'utilisateur a effectué une opération ou à un moment précis pour empêcher l'accès. Dans Uniapp, la suppression dynamique des routes peut être réalisée via la méthode router.removeRoute(). Le code spécifique est le suivant :

//获取路由对象
let router = this.$router

//删除路由
let route = router.match('/newPage')
if (route) {
  router.removeRoute(route)
}

Dans le code ci-dessus, nous obtenons d'abord l'objet de routage, puis utilisons le router.match(). pour faire correspondre la table de routage nouvellement ajoutée Route newPage, si la correspondance réussit, utilisez la méthode router.removeRoute() pour supprimer la route de la table de routage. Il convient de noter que lorsque vous utilisez la méthode router.match() pour faire correspondre une route, vous devez vous assurer que la route existe déjà, sinon l'échec de la correspondance entraînera une erreur de programme.

3. Résumé

Grâce à l'introduction de cet article, nous avons découvert les méthodes d'ajout et de suppression dynamiques de routes dans Uniapp, ainsi que des exemples de code associés. Dans le processus de développement réel, ces méthodes peuvent être utilisées de manière flexible en fonction des besoins du projet et des conditions réelles pour obtenir des fonctions de traitement de routage plus riches et plus flexibles et améliorer l'efficacité du développement et l'expérience utilisateur.

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!