[Résumé] Méthodes de base d'utilisation des références URL dans Vue

La manière d'utiliser les références URL dans Vue est un peu différente des pages HTML traditionnelles. Habituellement, en HTML, nous pouvons utiliser directement des chemins relatifs ou absolus comme URL pour référencer des ressources ou créer des liens vers d'autres pages. Mais dans Vue, nous devons utiliser Vue Router pour gérer le routage et les chemins de routage dans l'application.

Voici quelques méthodes de base pour utiliser les références URL dans Vue :

1. Utilisez Vue Router pour la gestion des itinéraires

Dans Vue, nous pouvons utiliser Vue Router pour gérer nos itinéraires. Nous pouvons utiliser Vue Router dans les composants Vue pour implémenter la navigation d'itinéraire et les sauts d'itinéraire.

Vue Router peut être installé via le gestionnaire de packages npm puis utilisé dans les applications Vue. Introduisez Vue Router dans le fichier main.js :

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

Ensuite, nous pouvons définir des règles de routage et des chemins de routage. Par exemple, dans un composant nommé MyComponent.vue, nous pouvons définir un chemin de routage :

const router = new VueRouter({
  routes: [
    {
      path: '/my-component',
      name: 'MyComponent',
      component: MyComponent
    }
  ]
})

Cette règle de routage signifie que lorsque le chemin /my-component est saisi dans le navigateur, le composant MyComponent sera rendu.

2. Utilisez des liens de routage pour générer des URL

Dans Vue, nous pouvons utiliser le composant pour générer des liens pour la navigation d'itinéraire et les sauts dans l'application. Ce lien peut nous aider à générer le véritable chemin de l'URL et à effectuer des sauts de routage dans l'application.

Par exemple, dans un composant nommé App.vue, nous pouvons utiliser le composant pour générer un lien :

<router-link to="/my-component">Link to My Component</router-link>

Ce lien représente une URL vers le chemin /my-component, lorsque l'utilisateur clique sur le lien , l'application passera au composant MyComponent.

3. Utilisation de l'objet $router

Dans Vue, chaque composant peut accéder à l'instance de routeur via l'objet $router. Cet objet contient toutes les méthodes de routage grâce auxquelles nous pouvons effectuer des opérations de routage.

Par exemple, nous pouvons utiliser l'objet $router dans un composant nommé MyComponent.vue pour implémenter un saut de routage :

export default {
  methods: {
    goToAbout() {
      this.$router.push('/about')
    }
  }
}

Cette méthode signifie sauter vers le chemin /about.

En résumé, Vue Router peut nous aider à gérer le routage et les chemins de routage. Utilisez le composant dans le composant Vue pour générer des liens URL et utilisez l'objet $router dans le composant pour effectuer des sauts de routage.

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!