Use vue to implement secondary route setting method-JS Tutorial-php.cn

Use vue to implement secondary route setting method

亚连

Release： 2018-06-06 15:54:46

Original

5224 people have browsed it

Now I will share with you a Vue secondary routing setting method, which has a good reference value and I hope it will be helpful to everyone.

Routing will definitely be used when using Vue in the project, and the requirements for secondary routing and even three-level routing are strictly needed. Of course, the configuration method of multi-level routing is the same as that of secondary routing. To put it simply Let’s talk about the configuration of secondary routing.

First prepare the structure of the first-level routing:

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

Copy after login

Introduce the module in main.js, and Configure routing:

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

Copy after login

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

Copy after login

See the effect first

Click to enter the next level after listening to this book every day

Set the secondary route in main.js

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

Copy after login

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

Copy after login

Just create the modules required for each route under the corresponding path

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Using time plug-in and obtaining selection value in mint-ui

VUE2 realizes secondary province and city linkage selection

Select all in vue to implement data binding and acquisition

The above is the detailed content of Use vue to implement secondary route setting method. For more information, please follow other related articles on the PHP Chinese website!