Maison > Article > interface Web > Utilisez vue pour implémenter la méthode de définition d'itinéraire secondaire

Utilisez vue pour implémenter la méthode de définition d'itinéraire secondaire

亚连original: 2018-06-06 15:54:465209parcourir

Maintenant, je vais partager avec vous une méthode de définition d'itinéraire secondaire Vue, qui a une bonne valeur de référence et j'espère qu'elle sera utile à tout le monde.

Le routage sera certainement utilisé lors de l'utilisation de Vue dans le projet, et les exigences pour le routage de deuxième niveau et même le routage de troisième niveau sont strictement nécessaires. Bien entendu, la méthode de configuration du routage multi-niveaux est la même. comme le routage de deuxième niveau. Pour faire simple, parlons de la configuration du routage secondaire.

Préparez d'abord la structure du routage de premier niveau :

 <router-link to="/discover">
  <p @click="clickFind(&#39;发现&#39;)">
   <span class="icon-find"></span>
   <p>发现</p>
  </p>
  </router-link>
  <router-link to="/todayStudy">
  <p @click="clickStudy(&#39;今日学习&#39;)">
   <span class="icon-todayStudy"></span>
   <p>今日学习</p>
  </p>
  </router-link>
  <router-link to="/listenAnyWhere">
  <p @click="clickListen(&#39;随时听&#39;)">
   <span class="icon-listenAny"></span>
   <p>随时听</p>
  </p>
  </router-link>
  <router-link to="/bought">
  <p @click="clickBought(&#39;已购&#39;)">
   <span class="icon-areadyBy"></span>
   <p>已购</p>
  </p>
  </router-link>
  <router-link to="/mine">
  <p @click="clickMe">
   <span class="icon-me"></span>
   <p>我</p>
  </p>
  </router-link>
 </p>
 <router-view></router-view>

Introduisez le module dans main. js , et configurez le routage :

import discover from &#39;./components/discover/discover.vue&#39;; 
import todayStudy from &#39;./components/todayStudy/study.vue&#39;; 
import listen from &#39;./components/listenAnyWhere/listen.vue&#39;; 
import bought from &#39;./components/bought/bought.vue&#39;; 
import mine from &#39;./components/mine/mine.vue&#39;;

const routes = [ 
 { 
 path: &#39;/&#39;, 
 redirect: &#39;/discover&#39; 
 }, 
 { 
 path: &#39;/discover&#39;, 
 component: discover 
 }, 
 { 
 path: &#39;/todayStudy&#39;, 
 component: todayStudy 
 }, 
 { 
 path: &#39;/listenAnyWhere&#39;, 
 component: listen 
 }, 
 { 
 path: &#39;/bought&#39;, 
 component: bought 
 }, 
 { 
 path: &#39;/mine&#39;, 
 component: mine 
 } 
];

Voir l'effet en premier

Cliquez pour accéder au niveau suivant après avoir écouté ce livre tous les jours

Dans main.js Définir l'itinéraire secondaire

import thisMouth from &#39;./components/discover/detailEveryDay/thisMouth/thisMouth.vue&#39;; 
import four from &#39;./components/discover/detailEveryDay/fourth/fourth.vue&#39;; 
import three from &#39;./components/discover/detailEveryDay/three/third.vue&#39;; 
import two from &#39;./components/discover/detailEveryDay/two/second.vue&#39;; 
import one from &#39;./components/discover/detailEveryDay/one/first.vue&#39;; 
import twel from &#39;./components/discover/detailEveryDay/twe/twel.vue&#39;; 
import elev from &#39;./components/discover/detailEveryDay/elven/elev.vue&#39;;

const routes = [ 
 { 
 path: &#39;/&#39;, 
 redirect: &#39;/discover&#39; 
 }, 
 { 
 path: &#39;/discover&#39;, 
 component: discover, 
 <span style="color:#ff0000;">children: [ 
  { 
  path: &#39;/&#39;, 
  component: thisMouth 
  }, 
  { 
  path: &#39;/thisMouth&#39;, 
  component: thisMouth 
  }, 
  { 
  path: &#39;/forthMouth&#39;, 
  component: four 
  }, 
  { 
  path: &#39;/thirdMouth&#39;, 
  component: three 
  }, 
  { 
  path: &#39;/secondMouth&#39;, 
  component: two 
  }, 
  { 
  path: &#39;/firstMouth&#39;, 
  component: one 
  }, 
  { 
  path: &#39;/elMouth&#39;, 
  component: twel 
  }, 
  { 
  path: &#39;/twMouth&#39;, 
  component: elev 
  } 
 ]</span> 
 },

et établir les modules requis pour chaque itinéraire sous le chemin correspondant

Ce qui précède est ce que j'ai compilé pour vous. J'espère qu'il vous sera utile à l'avenir.

Articles Liés

Voir plus