Comment ouvrir une nouvelle page dans Vue

Vue est un framework JavaScript populaire pour développer des applications Web modernes. Vue est conçu pour être flexible et facilement extensible, ce qui le rend idéal pour créer des applications d'une seule page. Cependant, pour certains débutants, ouvrir une page dans Vue peut être un peu difficile. Dans cet article, nous verrons comment ouvrir une nouvelle page dans Vue, ainsi que certains des problèmes que vous pourriez rencontrer lors de l'ouverture de la page.

Tout d’abord, examinons la méthode de base pour ouvrir une nouvelle page dans Vue. Pour ouvrir une nouvelle page, vous devez utiliser la fonction de routage fournie par Vue. Le routage est un concept important dans Vue, c'est un composant mappé à une URL. Le routage rend la navigation au sein de l’application très simple.

Pour utiliser le routage Vue, assurez-vous que Vue Router est installé. Vue Router peut être installé à l'aide de npm ou de fil, comme indiqué ci-dessous :

npm install vue-router

ou

yarn add vue-router

Une fois l'installation terminée, vous pouvez utiliser Vue Router. Tout d'abord, vous devez créer une instance de routeur dans votre application Vue, comme indiqué ci-dessous :

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

Vue.use(VueRouter)

const router = new VueRouter({
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home
    },
    {
      path: '/about',
      name: 'About',
      component: About
    }
  ]
})

Dans cet exemple, une instance de routeur est créée et deux routes sont définies : une pour la page d'accueil et l'autre pour la page à propos. Chaque route a un chemin URL (chemin), un nom (nom) et un composant (composant). Ces routes seront utilisées dans l'application Vue.

Ensuite, vous devez utiliser l'instance de routeur créée dans votre application Vue. L'attribut router peut être utilisé dans l'instance racine de l'application Vue comme indiqué ci-dessous :

import Vue from 'vue'
import App from './App.vue'
import router from './router'

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

Maintenant qu'une configuration de routage de base a été créée, l'étape suivante consiste à ouvrir une nouvelle page dans Vue.

Pour ouvrir une nouvelle page dans Vue, vous devez utiliser la commande v-router-link fournie par Vue Router. La directive v-router-link est utilisée dans Vue pour créer un lien cliquable permettant à l'utilisateur de naviguer d'une page à une autre.

Par exemple, pour créer un menu de navigation dans Vue incluant un lien vers la page "À propos", vous pouvez utiliser le code suivant :

<router-link to="/about">About</router-link>

Dans cet exemple, la directive v-router-link est utilisée pour créer un lien vers le lien de la page « À propos ». L'attribut to spécifie le chemin URL du lien. Lorsque l'utilisateur clique sur le lien, Vue Router accède au composant mappé par ce chemin URL.

Maintenant que vous connaissez la méthode de base pour ouvrir une nouvelle page dans Vue, examinons certains des problèmes que vous pouvez rencontrer lors de l'ouverture d'une page.

La première question est de savoir comment accéder aux paramètres d'URL dans la nouvelle page. Pour accéder aux paramètres d'URL dans Vue, vous pouvez utiliser l'objet $route. L'objet $route contient des informations sur l'itinéraire actuel, notamment les paramètres d'URL et les paramètres de requête. Par exemple, le paramètre est accessible dans le chemin URL suivant :

/about/:id

Le paramètre ID est accessible dans Vue à l'aide du code suivant :

this.$route.params.id

La deuxième question est de savoir comment ouvrir un lien externe dans Vue. Pour ouvrir un lien externe dans Vue, vous pouvez utiliser l'attribut target de la directive v-router-link fournie par Vue Router. Par exemple, ouvrez un lien externe dans la directive Vrouter-link suivante :

<router-link to="https://www.example.com" target="_blank">Example</router-link>

Dans cet exemple, l'attribut target est utilisé pour ouvrir une nouvelle fenêtre et créer un lien vers l'URL externe.

Dans cet article, nous avons expliqué comment ouvrir une nouvelle page dans Vue. Nous avons appris comment créer une configuration de routage de base à l'aide de Vue Router, comment créer un lien cliquable à l'aide de la directive v-router-link, comment accéder aux paramètres d'URL dans une nouvelle page et comment ouvrir un lien externe dans Vue. Ces conseils vous aideront à devenir un maître développeur 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!