Explication détaillée de la merveilleuse utilisation de vue-router dans Vue

Vue est l'un des frameworks front-end les plus populaires actuellement. Il est non seulement simple et facile à utiliser, mais il possède également une forte évolutivité. L'un des plug-ins auxquels il convient de prêter attention est vue-router. vue-router est le plug-in de routage officiel pour Vue. Il peut mieux contrôler la navigation de routage dans les applications Vue, rendre la relation entre le routage et les composants plus claire et améliorer l'expérience interactive de l'utilisateur. Cet article expliquera en détail comment utiliser Vue-router et ses merveilleuses utilisations.

1. Installation et utilisation

Avant d'utiliser vue-router, vous devez d'abord l'installer. Vous pouvez utiliser le gestionnaire de packages npm pour installer le plugin vue-router. La commande d'installation est la suivante :

npm install vue-router

Une fois l'installation terminée, introduisez et utilisez vue-router dans le fichier main.js :

import VueRouter from 'vue-router'
import routes from './router'

const router = new VueRouter({
      routes
})

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

Parmi eux, le paramètre routes précise la configuration du routage, qui peut être modifiée selon le projet besoins. Transmettez ensuite le paramètre router dans l'objet d'instanciation Vue pour activer la fonction de routage.

2. Configuration de base

La configuration du routage comprend deux parties : la table de routage et le composant de routage. La table de routage est principalement utilisée pour configurer les chemins de routage et les composants correspondants. Le composant de routage est la vue des composants du chemin de routage correspondant.

Créez le fichier router.js dans le répertoire src et définissez la table de routage et les composants. Comme suit :

import Home from './views/Home.vue'
import About from './views/About.vue'

export default [
    {
        path: '/',
        name: 'home',
        component: Home
    },
    {
        path: '/about',
        name: 'about',
        component: About
    }
]

Ensuite, introduisez la configuration de routage dans main.js et transmettez-la dans l'instance VueRouter. Parmi eux, le chemin de routage est configuré à l'aide de l'attribut path et l'attribut composant spécifie le composant de routage correspondant.

3. Passage de paramètres

Vue-router prend également en charge le passage de paramètres, et les paramètres transmis peuvent être obtenus via l'objet $route.

1. Paramètres de transmission de chemin

Paramètres de transmission de chemin signifie placer des paramètres dans le cadre du chemin de routage, par exemple :

{
  path: '/user/:userId',
  name: 'user',
  component: User
}

Lorsque l'utilisateur accède à /user/1, le routage transmettra 1 comme paramètre userId au composant User .

2. Transmission des paramètres de requête

La transmission des paramètres de requête signifie placer les paramètres après le chemin de routage sous la forme de paires clé-valeur, séparées par des points d'interrogation ?, et les paires clé-valeur consécutives sont connectées avec &, par exemple :

{
  path: '/user',
  name: 'user',
  component: User
}

Quand Lorsqu'un utilisateur accède à /user?id=1&name=john, la route transmettra {id: 1, name: 'john'} comme paramètres de requête au composant User.

4. Redirection et routage imbriqué

1. Redirect

Redirect signifie sauter automatiquement vers un autre chemin lorsque l'utilisateur accède à un certain chemin dans le navigateur. Le code suivant implémente la fonction de saut automatique du chemin /about vers le chemin /home :

import Home from './views/Home.vue'
import About from './views/About.vue'

export default [
  {
    path: '/',
    redirect: '/home'
  },
  {
    path: '/home',
    name: 'home',
    component: Home
  },
  {
    path: '/about',
    redirect: '/home'
  }
]

2. Routage imbriqué

Le routage imbriqué fait référence au routage qui utilise des composants enfants dans les composants parents. Par exemple, dans une page avec une structure fixe en tête et en bas, le composant « contenu » doit être imbriqué. La structure à trois couches ressemble à ceci :

header
 / 
L   R
    |
content
    |
footer

Les routes imbriquées doivent utiliser le 975b587bf85a482ea10b0a28848e78a4 balise à l’intérieur du composant parent pour occuper l’espace et définir la table de routage enfant à l’intérieur de la table de routage du composant parent. Par exemple :

const home = {
  template: `
    <div>
      <h2>Home</h2>
      <router-view></router-view>
    </div>
  `
}

const about = {
  template: '<div>About</div>'
}

const contact = {
  template: '<div>Contact</div>'
}

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

utilise la balise 975b587bf85a482ea10b0a28848e78a4 dans le composant home comme espace réservé pour les sous-composants "à propos" et "contenu". Dans la table de routage, la sous-table de routage configurée par le composant parent « home » contient deux chemins de sous-routage « about » et « content ».

5. Route guard

1. Global guard

Global guard sera déclenché avant le changement de routage, parmi lesquels beforeEach() est la pré-garde globale, qui peut effectuer des opérations telles que la vérification des autorisations et la vérification de la connexion.

router.beforeEach((to, from, next) => {
  // 验证用户是否登陆 
  if(to.path === '/login') {
    next();
  } else {
    let token = localStorage.getItem('token');

    if(token === null || token === '') {
      next('/login');
    } else {
      next();
    }
  }
})

Le post guard global est utilisé pour se déclencher après un changement de routage et est utilisé pour gérer des opérations telles que la barre de progression du chargement des pages.

2. Route exclusive guard

Route exclusive guard est utilisé pour effectuer un traitement spécifique pour un certain itinéraire. Ajoutez simplement la définition de l'attribut beforeEnter dans la configuration du routage.

const router = new VueRouter({
  routes: [
    {
      path: '/admin',
      name: 'admin',
      component: admin,
      beforeEnter: (to, from, next) => {
        // 验证是否为管理员账户
        let token = localStorage.getItem('token');
        if(token === 'admin') {
          next();
        } else {
          next('/');
        }
      }
    }
  ]
})

3. In-component guard

In-component guard est principalement utilisé pour traiter le composant actuel. Comprenant : trois fonctions de garde : beforeRouteEnter, beforeRouteUpdate et beforeRouteLeave.

La fonction beforeRouteEnter est déclenchée avant l'entrée du composant. L'instance du composant n'est pas directement accessible dans cette fonction, mais l'instance du composant peut être transmise via la fonction de rappel suivante pour traitement.

export default {
  data () {
    return {
      user: {}
    }
  },
  beforeRouteEnter (to, from, next) {
    axios.get(`/api/user/${to.params.id}`).then(response => {
      next(vm => vm.setUser(response.data.user))
    })
  },
  methods: {
    setUser (user) {
      this.user = user
    }
  }
}

fonction beforeRouteUpdate Étant donné que les sauts de routage entre les composants ne recréeront pas les instances, vous devez utiliser la fonction beforeRouteUpdate pour le traitement. La fonction

export default {
  watch: {
    '$route' (to, from) {
      // 对路由变化作出响应...
    }
  },
  beforeRouteUpdate (to, from, next) {
    // react to route changes...
    // don't forget to call next()
  }
}

beforeRouteLeave est déclenchée lorsque le composant est sur le point d'être quitté et est utilisée pour gérer des opérations telles que les données de formulaire non enregistrées.

export default {
  beforeRouteLeave (to, from, next) {
    // 如果表单已保存或者页面没有修改，直接离开该页面
    if (this.saved || window.confirm('尚未保存，确定要离开吗？')) {
      next()
    } else {
      next(false)
    }
  }
}

6. Résumé

L'utilisation du plug-in vue-router peut fournir de puissantes capacités de contrôle pour la navigation par routage dans les applications Vue, améliorant ainsi l'expérience interactive de l'utilisateur. Cet article présente la configuration de base, le passage des paramètres, la redirection, le routage imbriqué et les gardes de routage de vue-router, qui peuvent aider les développeurs à mieux utiliser le plug-in 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!