Comment implémenter le saut de routage front-end sous Vue ?

Vue est un excellent framework front-end. Dans le développement d'applications, le saut de route front-end est une exigence très courante. Vue fournit des fonctions riches pour implémenter des sauts de routage. Cet article présentera l'implémentation du routage intégré de Vue et l'utilisation de la bibliothèque de routage tierce Vue-Router.

1. Implémentation du routage intégré de Vue

Dans Vue, vous pouvez utiliser le routeur vue intégré pour implémenter des sauts de routage front-end.

1. Installez vue-router

Utilisez la commande npm pour installer la bibliothèque vue-router :

npm install vue-router

2. Créez un objet Vue Router

Créez un objet Vue Router dans le fichier principal du projet Vue (tel que : main.js) et liez-le à l'instance Vue. Comme indiqué ci-dessous :

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const router = new VueRouter({
  // 路由配置
})
new Vue({
  router
}).$mount('#app')

Dans le code, nous introduisons d'abord vue-router et le lions à l'instance Vue. Ensuite, un objet Vue Router est créé et placé dans l'instance Vue.

3. Configuration du routage

Lors de la création d'un objet Vue Router, vous devez configurer le routage. La configuration dans Vue Router comprend principalement les chemins de routage, les composants de routage, les alias de routage et tout autre paramètre. Le chemin de routage correspond à la partie chemin dans l'URL, et le composant de routage définit les composants à afficher sous le chemin.

Par exemple, si nous voulons créer une route pour une page, nous pouvons l'écrire ainsi lors de la configuration de la route :

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

Parmi eux, le chemin de routage est "/about" et le composant correspondant est About.

4. Route Jump

Avec la configuration du routage, nous pouvons utiliser la fonction de saut d'itinéraire intégrée de Vue Router. Vue Router fournit la balise router-link et la méthode router.push pour implémenter des sauts d'itinéraire.

1) Utilisez la balise router-link

Vous pouvez utiliser la balise router-link dans les modèles HTML pour créer un lien de routage. La balise router-link générera automatiquement l'URL correcte en fonction de la configuration de routage.

Par exemple :

<router-link to="/about">关于我们</router-link>

Lorsque vous cliquez sur le lien À propos de nous, vous accédez à la page du composant correspondant au chemin de routage configuré "/about".

2) Utilisez la méthode router.push

En plus d'utiliser la balise router-link, Vue Router fournit également la méthode router.push pour implémenter des sauts d'itinéraire.

Par exemple :

this.$router.push('/about')

Dans le composant Vue, nous pouvons utiliser this.$router pour obtenir l'instance de Vue Router et utiliser la méthode push pour implémenter le saut. Ce code accédera à la page du composant avec le chemin de routage "/about".

2. Vue-router

Vue-Router est un routeur officiel basé sur Vue.js. Il s'agit du gestionnaire de routage officiellement publié par Vue.js, qui fournit des fonctions puissantes, telles que l'imbrication de routage, le routage dynamique, le chargement paresseux des routes, etc. Voyons comment utiliser Vue-Router pour implémenter des sauts de routage front-end.

1. Installer Vue-Router

Avant d'utiliser Vue-Router, vous devez d'abord l'installer dans le projet. Nous pouvons l'installer en utilisant la commande npm.

npm install vue-router --save

2. Créer une instance de routage

Lors de la création d'une route Vue, nous pouvons d'abord configurer les informations de routage pertinentes des composants de la page (y compris les sous-composants imbriqués) qui doivent être sautés dans un tableau.

Par exemple :

const routes = [
    {
        path: '/',
        component: Home
    },
    {
        path: '/about',
        component: About
    },
    {
        path: '/user/:id',
        component: User
    }
]

Ce tableau définit trois informations de routage. La première information de routage définit la page de renvoi par défaut comme Accueil, la deuxième information de routage définit la page de renvoi comme À propos et la troisième information de routage définit La page de renvoi comme Utilisateur, et les informations de routage doivent transmettre le paramètre id.

Ensuite, nous pouvons créer une instance de routage via la méthode createRouter de Vue-Router.

Par exemple :

import { createRouter, createWebHistory } from 'vue-router'
const router = createRouter({
    history: createWebHistory(),
    routes
})

Dans le code, nous utilisons la méthode createRouter de Vue-Router pour créer une instance de routage et définir la méthode de gestion de l'historique de routage et les informations de routage. Parmi eux, createWebHistory signifie utiliser l'API HTML5 History pour la gestion du routage.

3. Enregistrer la route

Après avoir créé l'instance de routage, nous devons enregistrer l'instance de routage dans l'instance d'application Vue.

Par exemple :

import { createApp } from 'vue'
import App from './App.vue'
import { router } from './router'
createApp(App)
.use(router)
.mount('#app')

Dans le code, nous enregistrons l'instance de routage dans l'instance d'application Vue via la méthode d'utilisation de createApp.

En plus d'enregistrer les instances de routage, nous pouvons également implémenter des sauts de routage via le composant de navigation de routage router-view et le composant de lien de routage router-link fournis par Vue-Router.

Par exemple :

<router-link to="/">Home</router-link>
<router-link to="/about">About</router-link>
<router-link :to="{name: 'user', params: {id: userId}}">User</router-link>
<router-view></router-view>

Dans le code, nous utilisons la balise router-link pour créer trois liens de saut, et utilisons la balise router-view pour afficher le contenu correspondant du composant de routage. Le troisième lien doit transmettre un identifiant de paramètre dynamique.

4. Saut d'itinéraire

Vue-Router fournit une variété de façons d'implémenter le saut d'itinéraire, telles que :

• Utilisez le composant router-link
• Utilisez cette méthode.$router.push() dans le composant Vue ; ;
• Utilisez la méthode this.$router.replace() dans le composant Vue ;
• Utilisez la méthode this.$router.go() dans le composant Vue ;
• Utilisez this.$route.back() dans la méthode du composant Vue ;

Par exemple, utilisez la méthode router.push dans le composant Vue pour implémenter le saut de routage :

import { reactive } from 'vue'
export default {
    setup() {
        const state = reactive({
            userId: ''
        })
        const handleRoute = function() {
            router.push({
                name: 'user',
                params: { id: state.userId }
            })
        }
        return {
            state,
            handleRoute
        }
    }
}

Dans le code, nous utilisons reactive pour créer un objet dans le composant Vue, puis utilisons la méthode router.push dans le Méthode handleRoute. Parmi eux, le champ name correspond au lien de routeur ou à l'attribut name des informations de routage, et params est un objet qui contient les paramètres dynamiques requis pour le routage.

Conclusion

Vue-Router est un gestionnaire de routage très puissant et facile à utiliser. Dans une application Vue, Vue-Router peut être utilisé pour implémenter facilement les sauts de routage et le transfert de paramètres requis pour les sauts de routage. Pour les développeurs, cela rend l’écriture d’applications d’une seule page très simple et efficace.

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!