Comment modifier les paramètres de la barre d'adresse via le routage Vue

Vue est un framework JavaScript très populaire qui offre de nombreuses fonctionnalités pratiques pour les développeurs. Parmi eux, Vue Router est un sous-module de Vue et est responsable de la gestion de la relation de mappage entre les vues et les adresses. Grâce au routage Vue, nous pouvons facilement mapper différentes vues à différentes adresses URL. Cet article expliquera comment modifier les paramètres de la barre d'adresse via le routage Vue.

1. Installer Vue Router

Tout d'abord, nous devons installer Vue Router. Dans le terminal, saisissez la commande suivante pour installer :

npm install vue-router --save

Si vous utilisez le gestionnaire de packages Yarn, vous pouvez utiliser la commande suivante pour installer :

yarn add vue-router

2. Créez une instance Vue Router

Dans le fichier d'entrée de l'application, nous Une instance de Vue Router doit être créée. Voici un exemple de base :

import Vue from 'vue';
import Router from 'vue-router';
import HomePage from '@/components/HomePage.vue';
import AboutPage from '@/components/AboutPage.vue';

Vue.use(Router);

const router = new Router({
  routes: [
    {
      path: '/',
      name: 'home',
      component: HomePage,
    },
    {
      path: '/about',
      name: 'about',
      component: AboutPage,
    },
  ],
});

new Vue({
  el: '#app',
  router,
  template: '<App/>',
  components: { App },
});

Dans le code ci-dessus, nous définissons deux routes : '/' correspond au composant HomePage et '/about' correspond au composant AboutPage. Les deux routes ont un nom sous lequel nous pouvons les référencer dans notre code.

3. Modifier les paramètres de la barre d'adresse

Dans Vue Router, nous pouvons obtenir les informations de routage actuelles via l'objet $route, y compris le chemin de routage, les paramètres, le nom, etc. Nous pouvons utiliser l'objet $route pour modifier les paramètres de la barre d'adresse. Voici un exemple :

<script>
export default {
  methods: {
    changeParam() {
      this.$router.push({ name: 'about', params: { id: 1 } });
    },
  },
};
</script>

Dans cet exemple, nous définissons une méthode appelée changeParam, dans laquelle nous utilisons la méthode $router.push pour modifier les paramètres de la barre d'adresse. Cette méthode reçoit un objet contenant le nom de la route et les paramètres en tant que paramètres. Dans cet exemple, nous définissons le nom de la route sur « about » et le paramètre sur {id : 1}. Cela signifie que nous allons passer à la route « à propos » et lui transmettre un paramètre appelé « id » avec une valeur de 1.

4. Obtenir les paramètres de la barre d'adresse

En plus de modifier les paramètres de la barre d'adresse, nous pouvons également obtenir les paramètres de la barre d'adresse. Voici un exemple :

<script>
export default {
  computed: {
    id() {
      return this.$route.params.id;
    },
  },
};
</script>

Dans cet exemple, nous définissons une propriété calculée appelée id. Dans cette propriété calculée, nous utilisons $route.params.id pour obtenir le paramètre nommé « id » dans la barre d'adresse.

Avec ces étapes, nous pouvons facilement modifier les paramètres de la barre d'adresse et obtenir les paramètres dans la barre d'adresse. De cette façon, nous pouvons implémenter des sauts de page et un transfert de données plus avancés dans les applications Vue.

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!