Utilisez vue pour implémenter la méthode de définition d'itinéraire secondaire-js tutoriel-php.cn

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

亚连

Libérer： 2018-06-06 15:54:46

original

5217 Les gens l'ont consulté

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>

Copier après la connexion

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;;

Copier après la connexion

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 
 } 
];

Copier après la connexion

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;;

Copier après la connexion

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> 
 },

Copier après la connexion

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