vue中如何設(shè)置二級路由
今天小編給大家分享一下vue中如何設(shè)置二級路由的相關(guān)知識點，內(nèi)容詳細，邏輯清晰，相信大部分人都還太了解這方面的知識，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。
站在用戶的角度思考問題，與客戶深入溝通，找到雁江網(wǎng)站設(shè)計與雁江網(wǎng)站推廣的解決方案，憑借多年的經(jīng)驗，讓設(shè)計與互聯(lián)網(wǎng)技術(shù)結(jié)合，創(chuàng)造個性化、用戶體驗好的作品，建站類型包括：網(wǎng)站建設(shè)、網(wǎng)站設(shè)計、企業(yè)官網(wǎng)、英文網(wǎng)站、手機端網(wǎng)站、網(wǎng)站推廣、申請域名、網(wǎng)絡(luò)空間、企業(yè)郵箱。業(yè)務(wù)覆蓋雁江地區(qū)。
首先把一級路由的結(jié)構(gòu)準備好：
<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
}
];先看效果
點擊每天聽本書后進入下一級
在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)的路徑下建立各個路由所需模塊即可
以上就是“vue中如何設(shè)置二級路由”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學(xué)習(xí)更多的知識，請關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。
網(wǎng)頁名稱：vue中如何設(shè)置二級路由
分享路徑：http://muchs.cn/article42/ihgehc.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站改版、網(wǎng)站制作、響應(yīng)式網(wǎng)站、云服務(wù)器、微信公眾號、營銷型網(wǎng)站建設(shè)
聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)
