vue-router二級導(dǎo)航切換路由及高亮顯示的實(shí)現(xiàn)方法

這里以網(wǎng)易云音樂作為示例，效果圖：

成都創(chuàng)新互聯(lián)公司專注于茂名企業(yè)網(wǎng)站建設(shè),成都響應(yīng)式網(wǎng)站建設(shè)公司,商城網(wǎng)站定制開發(fā)。茂名網(wǎng)站建設(shè)公司,為茂名等地區(qū)提供建站服務(wù)。全流程按需定制開發(fā)，專業(yè)設(shè)計(jì)，全程項(xiàng)目跟蹤，成都創(chuàng)新互聯(lián)公司專業(yè)和態(tài)度為您提供的服務(wù)

我們先一層一層寫導(dǎo)航

先設(shè)計(jì)第一層

1.設(shè)計(jì)導(dǎo)航頁面樣式

第一個導(dǎo)航頁面為Discover

Discover.vue：

<!-- -->
<template>
 <div>
 發(fā)現(xiàn)
 </div>
</template>


<script>
export default {
 name: "discover",
 data() {
 return {
 };
 }
};
</script>
<style scoped>
</style>

第二個導(dǎo)航頁面為Mymusic

其余代碼一樣，注意要把name改為相應(yīng)路由

name: "mymusic"

2.配置路由

index.js：

import DisCover from '@/components/DisCover'
import MyMusic from '@/components/MyMusic'
……

 routes: [
 {
  path: '/discover',
  name: 'discover',
  component: DisCover
 },
 {
  path: '/mymusic',
  name: 'mymusic',
  component: MyMusic
 }
 ]

3.使用router-link制作導(dǎo)航

我們創(chuàng)建一個新組件Guide.vue,把他插入到app.vue中

設(shè)計(jì)好路由的數(shù)據(jù)源：

 guides:[
  {
   id:0,
   name:'發(fā)現(xiàn)音樂',
   link:'/discover'
  },{
   id:1,
   name:'我的音樂',
   link:'/mymusic'
  },
  {
   id:2,
   name:'朋友',
   link:'friend'
  },
  {
   id:3,
   name:'商城',
   link:'mall'
  },
  {
   id:4,
   name:'音樂人',
   link:'musician'
  },
  {
   id:5,
   name:'下載客戶端',
   link:'download'
  }
  ]

Guide.vue：

  <ul class="nav nav-pills main-nav">
   <li v-for="(item,index) in guides" :key="index" role="presentation"
   :class="item.id==guidecurrent?'guide-active':''"
    >
    <router-link :to="item.link">{{item.name}}</router-link>
    </li>
   
   </ul>

to：是我們的導(dǎo)航路徑，要填寫的是你在router/index.js文件里配置的path值

4.單頁面多路由區(qū)域操作

我們在App.vue中加入<router-view>

<template>
 <div id="app">
 <Guide></Guide>
 <router-view/>
 </div>
</template>

<router-view>區(qū)域通過配置路由的js文件，來操作這些區(qū)域的內(nèi)容

設(shè)計(jì)好樣式后，我們可以發(fā)現(xiàn)我們的頁面上出現(xiàn)了導(dǎo)航

vue-router二級導(dǎo)航切換路由及高亮顯示的實(shí)現(xiàn)方法

那我們?nèi)绾卧O(shè)置默認(rèn)選項(xiàng)并未其設(shè)置樣式呢？
先定義一個定義當(dāng)前頁面的變量：

guidecurrent:0

設(shè)置選中樣式：

.guide-active{
 background: black;
}

.guide-active::after {
 content: "◢◣";
 font-size: 8px;
 position: absolute;
 color: rgb(182, 15, 15);
 top: 87%;
 left: 50%;
 transform: translate(-10px, -5px);
}

通過v-bind屬性將class屬性賦給每一個<li>元素

也就是說只有當(dāng)前頁面的<li>元素才會被加載active樣式

這里注意vue中的屬性如果要以變量設(shè)置

必須要寫成 v-bind:屬性名]="[屬性值]"的形式

 <li v-for="(item,index) in guides" :key="index" role="presentation"
  :class="item.id==guidecurrent?'guide-active':''"
   >
  <router-link :to="item.link">{{item.name}}</router-link>
 </li>

下面我們設(shè)計(jì)二級導(dǎo)航

5.二級導(dǎo)航頁面樣式

與上面相同，我們創(chuàng)建兩個.vue頁面

Rank.vue和Recommend.vue

6.配置路由

index.js

routes: [
 {
  path: '/discover',
  name: 'discover',
  component: DisCover,
  children:[
  {path:'rec',component:reccommend},
  {path:'rank',component:rank},
  ]
 },
 {
  path: '/mymusic',
  name: 'mymusic',
  component: MyMusic
 }
 ]

6.配置二級導(dǎo)航的<router-link>

 <ul class="nav nav-pills">
  <li role="presentation" v-for="(item,index) in guides" :key="index"
   :class="item.id==discovercurrent?'active':''"
  >
   <router-link :to="item.id">{{item.name}}</router-link>
  </li>
  </ul>

這時我們發(fā)現(xiàn)我們的二級導(dǎo)航已經(jīng)出現(xiàn)了

vue-router二級導(dǎo)航切換路由及高亮顯示的實(shí)現(xiàn)方法

同樣，設(shè)置當(dāng)前頁面的變量，利用class變量以及三元表達(dá)式，實(shí)現(xiàn)功能

至此，我們的vue-router實(shí)現(xiàn)的二級導(dǎo)航就實(shí)現(xiàn)了

總結(jié)

以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，謝謝大家對創(chuàng)新互聯(lián)的支持。

網(wǎng)頁名稱：vue-router二級導(dǎo)航切換路由及高亮顯示的實(shí)現(xiàn)方法
網(wǎng)站URL：http://aaarwkj.com/article24/jeiije.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站設(shè)計(jì)、企業(yè)網(wǎng)站制作、網(wǎng)站排名、定制開發(fā)、關(guān)鍵詞優(yōu)化、商城網(wǎng)站

聲明：本網(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)

猜你還喜歡下面的內(nèi)容

欧美一级特黄大片做受成人-亚洲成人一区二区电影-激情熟女一区二区三区-日韩专区欧美专区国产专区

vue-router二級導(dǎo)航切換路由及高亮顯示的實(shí)現(xiàn)方法