Comment utiliser Vuejs pour personnaliser le routage

Cette fois je vais vous montrer comment utiliser Vuejs pour définir le routage et quelles sont les précautions pour utiliser Vuejs pour personnaliser le routage Voici un cas pratique, jetons un oeil. .

Nous savons que les composants peuvent spécifier des modèles via un modèle. Pour les composants à fichier unique, les modèles peuvent être spécifiés via des balises de modèle. De plus, Vue nous fournit également un moyen de personnaliser les composants de rendu, c'est-à-dire la fonction de rendu. render, veuillez lire la documentation officielle pour une utilisation spécifique de render.

Ensuite, nous commençons à implémenter notre routage front-end.

Implémentation simple

Nous exécutons d'abord la commande vue init webpack vue-router-demo pour initialiser notre projet (notez que lors de l'initialisation, ne choisissez pas d'utiliser vue-router).

Tout d'abord, créez le fichier layout/index.vue dans le répertoire src à utiliser comme modèle pour la page. Le code est le suivant :

<template>
  <div class="container">
    <ul>
      <li><a :class="{active: $root.currentRoute === &#39;/&#39;}" href="/">Home</a></li>
      <li><a :class="{active: $root.currentRoute === &#39;/hello&#39;}" href="/hello">HelloWord</a></li>
    </ul>
    <slot></slot>
  </div></template><script>export default {  name: &#39;Layout&#39;,
};</script><style scoped>.container {  max-width: 600px;  margin: 0 auto;  padding: 15px 30px;  background: #f9f7f5;
}a.active {  color: #42b983;
}</style>

Ensuite, déplacez les composants/HelloWorld. .vue vers src /pages, et modifiez son code pour utiliser le package de modèles de page créé ci-dessus :

<template>
  <layout>
      <!-- 原模板内容 -->
  </layout></template><script>import Layout from &#39;@/layout&#39;;export default {  name: &#39;HelloWorld&#39;,  components: {
    Layout,
  },  // ...};</script><!-- ... -->

Bien sûr, vous devez également ajouter une page 404 pour faire office de route lorsque l'utilisateur entre une route qui n'existe pas dans l'interface.

La dernière étape est notre étape la plus importante, réécrivez main.js et changez dynamiquement les composants de rendu en fonction de l'URL de la page.

Définir le mappage d'itinéraire :

// url -> Vue Componentconst routes = {  '/': 'Home',  '/hello': 'HelloWorld',
};

Ajoutez la propriété calculée VueComponent et introduisez les composants requis en fonction de window.location.pathname.

const app = new Vue({  el: '#app',
  data() {    return {      // 当前路由
      currentRoute: window.location.pathname,
    };
  },  computed: {
    ViewComponent() {      const currentView = routes[this.currentRoute];      /* eslint-disable */
      return (
        currentView
          ? require('./pages/' + currentView + '.vue')
          : require('./pages/404.vue')
      );
    },
  },
});

Pour implémenter la logique de rendu, la fonction de rendu fournit un paramètre createElement, qui est une fonction qui génère un VNode. Vous pouvez lui transmettre directement le composant introduit dynamiquement pour effectuer le rendu.

const app = new Vue({  // ...
  render(h) {    // 因为组件是以 es module 的方式引入的，
    // 此处必须使用 this.ViewComponent.default 属性作为参数
    return h(this.ViewComponent.default);
  }
});

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Manipulation des styles d'objets DOM pour l'apprentissage de base de JS Objet

Types de données de base pour l'apprentissage d'amélioration de base de JS

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!