vue中怎么設(shè)置二級路由

本篇文章為大家展示了vue中怎么設(shè)置二級路由，內(nèi)容簡明扼要并且容易理解，絕對能使你眼前一亮，通過這篇文章的詳細(xì)介紹希望你能有所收獲。

創(chuàng)新互聯(lián)主營吉林網(wǎng)站建設(shè)的網(wǎng)絡(luò)公司,主營網(wǎng)站建設(shè)方案,成都APP應(yīng)用開發(fā),吉林h5重慶小程序開發(fā)搭建,吉林網(wǎng)站營銷推廣歡迎吉林等地區(qū)企業(yè)咨詢

首先把一級路由的結(jié)構(gòu)準(zhǔn)備好：

 <router-link to="/discover">
  <div @click="clickFind('發(fā)現(xiàn)')">
   <span class="icon-find"></span>
   <p>發(fā)現(xiàn)</p>
  </div>
  </router-link>
  <router-link to="/todayStudy">
  <div @click="clickStudy('今日學(xué)習(xí)')">
   <span class="icon-todayStudy"></span>
   <p>今日學(xué)習(xí)</p>
  </div>
  </router-link>
  <router-link to="/listenAnyWhere">
  <div @click="clickListen('隨時聽')">
   <span class="icon-listenAny"></span>
   <p>隨時聽</p>
  </div>
  </router-link>
  <router-link to="/bought">
  <div @click="clickBought('已購')">
   <span class="icon-areadyBy"></span>
   <p>已購</p>
  </div>
  </router-link>
  <router-link to="/mine">
  <div @click="clickMe">
   <span class="icon-me"></span>
   <p>我</p>
  </div>
  </router-link>
 </div>
 <router-view></router-view>

在main.js里引入模塊，并配置路由：

import discover from './components/discover/discover.vue'; 
import todayStudy from './components/todayStudy/study.vue'; 
import listen from './components/listenAnyWhere/listen.vue'; 
import bought from './components/bought/bought.vue'; 
import mine from './components/mine/mine.vue';

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

先看效果

 

 

點(diǎn)擊每天聽本書后進(jìn)入下一級

 

在main.js里設(shè)置二級路由

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

const routes = [ 
 { 
 path: '/', 
 redirect: '/discover' 
 }, 
 { 
 path: '/discover', 
 component: discover, 
 <span >children: [ 
  { 
  path: '/', 
  component: thisMouth 
  }, 
  { 
  path: '/thisMouth', 
  component: thisMouth 
  }, 
  { 
  path: '/forthMouth', 
  component: four 
  }, 
  { 
  path: '/thirdMouth', 
  component: three 
  }, 
  { 
  path: '/secondMouth', 
  component: two 
  }, 
  { 
  path: '/firstMouth', 
  component: one 
  }, 
  { 
  path: '/elMouth', 
  component: twel 
  }, 
  { 
  path: '/twMouth', 
  component: elev 
  } 
 ]</span> 
 },

在相應(yīng)的路徑下建立各個路由所需模塊即可

 

上述內(nèi)容就是vue中怎么設(shè)置二級路由，你們學(xué)到知識或技能了嗎？如果還想學(xué)到更多技能或者豐富自己的知識儲備，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

新聞名稱：vue中怎么設(shè)置二級路由
文章網(wǎng)址：http://bm7419.com/article6/jcegig.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供企業(yè)網(wǎng)站制作、網(wǎng)站制作、靜態(tài)網(wǎng)站、定制網(wǎng)站、品牌網(wǎng)站建設(shè)、企業(yè)建站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)