vue passe au HTML avec des paramètres

Dans les applications Vue, nous devons souvent passer d'une page HTML à l'autre. Parfois, nous devons intégrer des paramètres de saut pour répondre aux besoins de l'entreprise. Cet article explique comment accéder aux pages HTML avec des paramètres dans les applications Vue.

1. Utilisez Vue Router

Vue Router est le gestionnaire de routage officiel de Vue.js, qui peut facilement implémenter des sauts de routage pour les applications SPA. L'utilisation de Vue Router dans une application Vue peut facilement implémenter des sauts de page HTML avec des paramètres.

1. Installer Vue Router

Avant d'utiliser Vue Router, vous devez d'abord l'installer. Vue Router peut être installé via npm. La commande spécifique est la suivante :

npm install vue-router --save

Une fois l'installation terminée, introduisez Vue Router dans le projet Vue, comme indiqué ci-dessous :

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

2. Configurer le routage

Avant d'utiliser Vue Router pour saut d'itinéraire, vous devez d'abord configurer le routage. La configuration du routage dans Vue Router est très simple. Il vous suffit de définir le tableau des routes dans l'instance Vue. Chaque élément représente une configuration de routage. Par exemple :

const routes = [
  {
    path: '/home',
    name: 'home',
    component: Home
  },
  {
    path: '/detail/:id',
    name: 'detail',
    component: Detail
  }
]

const router = new Router({
  routes,
  mode: 'history'
})

export default router

Le code ci-dessus définit deux configurations de routage. Le chemin correspondant de la première route est "/home" et le composant est Home ; le chemin correspondant de la deuxième route est "/detail/:id", où "id" est un paramètre dynamique et le composant est Detail.

3. Effectuer un saut d'itinéraire

Il est très simple d'effectuer un saut d'itinéraire dans Vue Router. Utilisez simplement le composant router-link pour sauter ou utilisez la méthode router.push pour naviguer par programme.

• Utilisez router-link pour sauter

L'utilisation du composant router-link dans le modèle du composant Vue peut facilement effectuer des sauts d'itinéraire. Par exemple :

<router-link :to="{name: 'detail', params: {id: 123}}">Show Detail</router-link>

Dans le code ci-dessus, le composant router-link est utilisé pour accéder à la route nommée "detail", et il porte le paramètre "id" avec une valeur de 123.

• Utilisez la méthode router.push pour sauter

L'utilisation de la méthode router.push dans le composant Vue peut réaliser une navigation programmatique. Par exemple :

this.$router.push({name: 'detail', params: {id: 123}})

Dans le code ci-dessus, la méthode router.push est utilisée pour accéder à la route nommée "detail" et porte le paramètre "id" avec une valeur de 123.

2. Utilisez location.href

En plus d'utiliser Vue Router pour les sauts d'itinéraire, vous pouvez également utiliser le location.href natif pour les sauts. Lors de la mise en œuvre d'un saut d'itinéraire via location.href, l'URL doit être épissée manuellement et les paramètres doivent être codés.

1. Utilisez location.href pour sauter

Utiliser location.href pour sauter est très simple. Par exemple, nous voulons accéder à la page HTML nommée "detail" et porter le paramètre "id" avec une valeur de 123, qui peut être la suivante :

location.href = '/detail.html?id=' + encodeURIComponent('123')

Dans le code ci-dessus, la méthode encodeURIComponent est utilisée pour encoder le paramètres. Ceci est fait pour éviter que les paramètres contiennent des caractères spéciaux, provoquant une mauvaise forme de l'URL de redirection.

2. Obtention des paramètres dans la page HTML

Après avoir accédé à la page HTML avec les paramètres, nous devons obtenir les paramètres de l'URL pour une utilisation ultérieure. En JavaScript, vous pouvez obtenir la partie paramètre de l'URL via location.search. Par exemple, supposons que nous sautions vers la page HTML nommée "detail" et que la valeur du paramètre "id" soit 123. Vous pouvez obtenir les paramètres via le code suivant :

function getUrlParam(name) {
  const reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)')
  const r = window.location.search.substr(1).match(reg)
  if (r != null) {
    return decodeURIComponent(r[2])
  }
  return null
}

const id = getUrlParam('id')
console.log(id) // 输出123

Dans le code ci-dessus, les méthodes RegExp et match sont utilisé pour obtenir les paramètres. La partie paramètres de l'URL. Utilisez la méthode decodeURIComponent pour décoder les paramètres afin d'éviter les erreurs d'analyse provoquées par les caractères spéciaux contenus dans les paramètres.

Pour résumer, utiliser Vue Router pour le saut d'itinéraire est une méthode plus recommandée. Il peut mieux gérer le routage, sauter plus rapidement et est plus conforme à l'idée MVVM de Vue. Bien sûr, nous pouvons également utiliser le fichier location.href natif pour les sauts de routage, mais nous devons faire attention à l'encodage et au décodage des paramètres. Dans le développement réel, il est nécessaire de choisir la méthode appropriée en fonction de la situation réelle.

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!