【Vue.js】vue-router實現二級導航切換路由及高亮顯示

blair 發布于2019-08-23 18:33 / 3923人閱讀

摘要：這里以網易云音樂作為示例，效果圖我們先一層一層寫導航先設計第一層設計導航頁面樣式第一個導航頁面為發現第二個導航頁面為其余代碼一樣，注意要把改為相應路由配置路由使用制作導航我們創建一個新組件把他插入到中設計好路由的數據源發現音樂我的

這里以網易云音樂作為示例，效果圖：

我們先一層一層寫導航
先設計第一層
1.設計導航頁面樣式
第一個導航頁面為Discover

Discover.vue：

第二個導航頁面為Mymusic
其余代碼一樣，注意要把name改為相應路由

 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制作導航
我們創建一個新組件Guide.vue,把他插入到app.vue中
設計好路由的數據源：

  guides:[
        {
          id:0,
          name:"發現音樂",
          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：

       
            
             {{item.name}}

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

4.單頁面多路由區域操作
我們在App.vue中加入

區域通過配置路由的js文件，來操作這些區域的內容

設計好樣式后，我們可以發現我們的頁面上出現了導航

那我們如何設置默認選項并未其設置樣式呢？
先定義一個定義當前頁面的變量：

 guidecurrent:0

設置選中樣式：

.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屬性賦給每一個

元素
也就是說只有當前頁面的

元素才會被加載active樣式
這里注意vue中的屬性如果要以變量設置
必須要寫成 v-bind:屬性名]="[屬性值]"的形式

  
     {{item.name}}

下面我們設計二級導航

5.二級導航頁面樣式
與上面相同，我們創建兩個.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.配置二級導航的

 
        
          {{item.name}}

這時我們發現我們的二級導航已經出現了

同樣，設置當前頁面的變量，利用class變量以及三元表達式，實現功能

至此，我們的vue-router實現的二級導航就實現了

云服務器 GPU云服務器欄目高亮顯示 jquery高亮顯示 linux 高亮顯示路由和導航

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.hztianpu.com/yun/105430.html

從頭開始學習vue-router

摘要：路由模塊的本質就是建立起和頁面之間的映射關系。這時候我們可以直接利用傳值了使用來匹配路由，然后通過來傳遞參數跳轉對應路由配置于是我們可以獲取參數六配置子路由二級路由實際生活中的應用界面，通常由多層嵌套的組件組合而成。一、前言要學習vue-router就要先知道這里的路由是什么？為什么我們不能像原來一樣直接用標簽編寫鏈接哪？vue-router如何使用？常見路由操作有哪些？等等這些問...

tommego 2019-08-23 12:55 評論0 收藏0
從頭開始學習vue-router

摘要：路由模塊的本質就是建立起和頁面之間的映射關系。這時候我們可以直接利用傳值了使用來匹配路由，然后通過來傳遞參數跳轉對應路由配置于是我們可以獲取參數六配置子路由二級路由實際生活中的應用界面，通常由多層嵌套的組件組合而成。一、前言要學習vue-router就要先知道這里的路由是什么？為什么我們不能像原來一樣直接用標簽編寫鏈接哪？vue-router如何使用？常見路由操作有哪些？等等這些問...

jhhfft 2019-08-02 11:56 評論0 收藏0
從頭開始學習vue-router

摘要：路由模塊的本質就是建立起和頁面之間的映射關系。這時候我們可以直接利用傳值了使用來匹配路由，然后通過來傳遞參數跳轉對應路由配置于是我們可以獲取參數六配置子路由二級路由實際生活中的應用界面，通常由多層嵌套的組件組合而成。一、前言要學習vue-router就要先知道這里的路由是什么？為什么我們不能像原來一樣直接用標簽編寫鏈接哪？vue-router如何使用？常見路由操作有哪些？等等這些問...

frontoldman 2019-08-29 17:11 評論0 收藏0
vue-router 基礎知識點

摘要：路由模塊的本質就是建立起和頁面之間的映射關系。模式的原理是事件監測值變化，可以在對象上監聽這個事件。這兩個方法應用于瀏覽器記錄棧，在當前已有的基礎之上，它們提供了對歷史記錄修改的功能。 vue-router 這里的路由并不是指我們平時所說的硬件路由器，這里的路由就是SPA（單頁應用）的路徑管理器。再通俗的說，vue-router就是WebApp的鏈接路徑管理系統。vue-router是...

ningwang 2019-08-26 10:41 評論0 收藏0
Vue + Vue-router + Element-ui 搭建一個非常簡單的dashboard d

摘要：但是有邊框，不好看啊再次美化使用使用圖標庫安裝這里主要貼一下的改動，其他的代碼就不貼了看下效果圖標什么的都有了。另外文件需要加上看看效果點擊菜單，路徑跳轉，并且每次都是單獨去加載路由的文件。做完這個demo后，我體會到，Vue組件化，webpack, Vue-router等，并不是很難學習，你需要的只是拿起斧頭的勇氣在做demo的過程中，我遇到一個問題，就是vue-router懶加載...

Near_Li 2019-08-21 17:38 評論0 收藏0