L'utilisation de Vue-router dans les projets et ses précautions

Utilisation de Vue-router dans les projets et précautions

Vue-router est le gestionnaire de routage officiel de Vue.js, utilisé pour créer des applications à page unique (Single Page Application). Il gère les URL et réalise des sauts sans actualisation entre les pages, nous aidant ainsi à créer des applications frontales plus flexibles et interactives.

1. Utilisez Vue-router

1. Installez Vue-router

Dans le répertoire racine du projet, utilisez la commande npm pour installer :

npm install vue-router

2. Configurer le routage

Dans le fichier d'entrée du projet ( comme main.js ) Présentation de Vue-router et des composants associés :

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from './views/Home.vue'
import About from './views/About.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'home',
    component: Home
  },
  {
    path: '/about',
    name: 'about',
    component: About
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

Dans le code ci-dessus, nous avons configuré deux routes : home et about, et les composants correspondants sont Home et About.

3. Configurez la sortie de routage

Dans le composant racine du projet (tel que App.vue), ajoutez la balise pour le rendu des différents composants de routage :

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

2. Exemples d'utilisation

Suivons Un cas simple sera combiné pour démontrer comment utiliser Vue-router.

Prenons l'exemple d'un site Web pour regarder des films en ligne. Nous devons mettre en œuvre deux pages : la page d'accueil et la page de détails du film.

1. Créez le composant de page d'accueil

Créez le fichier Home.vue dans le répertoire src/views et ajoutez le code suivant :

<template>
  <div class="home">
    <h1>欢迎来到电影在线观看网站</h1>
    <button @click="goToDetail">查看电影详情</button>
  </div>
</template>

<script>
export default {
  methods: {
    goToDetail() {
      this.$router.push('/detail')
    }
  }
}
</script>

2 Créez le composant de page de détails du film

Créez le fichier Detail.vue dans le src. /views et ajoutez le code suivant :

<template>
  <div class="detail">
    <h1>电影详情页</h1>
    <p>电影名称：{{ movie.name }}</p>
    <p>导演：{{ movie.director }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      movie: {
        name: '复仇者联盟',
        director: '乔·罗素'
      }
    }
  }
}
</script>

3. Configurez le routage

Dans main.js, introduisez les composants home et detail et configurez le routage :

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from './views/Home.vue'
import Detail from './views/Detail.vue'

Vue.use(VueRouter)

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

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

4. Exécutez le projet

Exécutez la commande npm run serve dans la ligne de commande pour démarrer le projet, puis visitez http://localhost:8080 dans le navigateur pour voir la page d'accueil.

Cliquez sur le bouton « Afficher les détails du film » pour accéder à la page des détails du film et afficher le nom et le réalisateur du film.

3. Notes

1. Utiliser le mode historique

Lors de la création d'une instance VueRouter, définissez le mode sur le mode historique pour supprimer le symbole # dans l'URL afin de rendre l'URL plus belle.

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

2. Routage dynamique

Vue-router permet l'utilisation du routage dynamique pour obtenir des sauts de page plus flexibles. Par exemple, vous pouvez transmettre l'ID d'un film via un paramètre de routage pour afficher des informations détaillées sur le film correspondant dans la page de détails du film.

// 路由配置
const routes = [
  {
    path: '/detail/:id',
    name: 'detail',
    component: Detail
  }
]

// 传递参数
this.$router.push('/detail/123')

// 获取参数
this.$route.params.id

3. Routage imbriqué

Vue-router prend en charge le routage imbriqué, qui peut charger un autre composant à l'intérieur d'un composant pour obtenir une structure de page plus complexe. Par exemple, vous pouvez charger le composant de révision dans la page de détails du film.

// 路由配置
const routes = [
  {
    path: '/detail/:id',
    name: 'detail',
    component: Detail,
    children: [
      {
        path: 'comment',
        component: Comment
      }
    ]
  }
]

Ce qui précède est l'utilisation de Vue-router dans le projet et ses précautions. En configurant les itinéraires et les composants, nous pouvons réaliser des sauts sans actualisation entre les pages et améliorer l'expérience utilisateur. Dans le même temps, Vue-router prend également en charge le routage dynamique et le routage imbriqué, nous permettant de créer des applications frontales plus riches et plus complexes. J'espère que cet article vous aidera à comprendre et à utiliser Vue-router !

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!