VUE，關于導航列表樣式切換（VUE Router：router-link-active）

figofuture 發布于2019-08-29 12:24 / 1182人閱讀

摘要：在自己入門學習的筆記中也有提及第一種中我們通常采用將當前選中的項目解除被選中的樣式為選中的條目添加被選中的樣式非常簡便，需要，并在中配置。但學，還是用其本身的與綁定最好。第四種也是最官方，最簡單的。

當我們新建一個網站時，總是要做一個導航列表，在傳統的WEB開發中這已經是一種很成熟的技術，自己學VUE，看了官方文檔，加上自己摸索，也學到不少，現在拿來分享一下。在自己VUE入門學習的筆記中也有提及
第一種：JQUERY中我們通常采用:
$("li[class="active"]").removeClass("active"); //將當前選中的項目解除被選中的樣式；
$(selector).addClass("active");//為選中的條目添加被選中的樣式；
非常簡便，需要npm install jquery，并在baseConfig中配置。但學VUE，還是用其本身的Class 與 Style 綁定最好。
第二種：VUE中沒有選擇器，但對于CSS屬性支持狀態關聯操作（Class 與 Style 綁定）：
eg：v-bind:class="{ active: isActive }"
解讀：當isActive值為真時，active樣式有效，Dom渲染結果是：class=“active”
當為false時，active樣式無效，Dom渲染結果是：class=“”
因此我們可以利用這個屬性做文章
標簽HTML：

這條語句我們生成了一個列表，并為其綁定了一個選中事件，為class動態綁定了一個判斷事件
同樣我們在選擇這個事件中：
function selected(seclctedName){
this.activeName= seclctedName;
}
數據屬性：

data(){
    return{
        tagNames:[
            {name:"hello",tabLink:"/Hello"},
            {name:"Login",tabLink:"/Login"},
            {name:"MyBlog",tabLink:"/MyBlog"}
        ],
        activeName:"hello" //當activeName初始值為空時，瀏覽器加載時默認沒有選擇的列表項，當為hello時，hello列表默認被選中
    }
},

初看運行起來還可以，切換也正常，但當我們停留在非HELLO頁面時，刷新頁面，hello被選中了，而刷新前的選中樣式被解除了，這是因為我們為activeName:"hello" 賦了初值。所以有BUG。
第三種：思路同二，但activeName,我新建導航樣式列表組件時，我為其定義了一個TITLE屬性
props: {

  title: {
      type: String,
       default: "any"
        }
  }

并在列表中使用:class="{active:title== tabbarName.name}來綁定active CSS，
當其他頁面調用這個組件時，指定TITLE，比如：、

這是當切換到MyBlog時，他就會被選中，隨便刷新，都沒有方法二的情況出現。

第四種：也是最官方，最簡單的。自己當時看VUEROUTER，因為看著面熟，看的比較快，所以錯過了這個知識點，開始頁的最下面有這樣一句話：當對應的路由匹配成功，將自動設置 class 屬性值 .router-link-active，所以你只需要在自己的STYLE文件中，寫了.router-link-active的樣式，列表選中后，系統就會自動去綁定這個樣式。此處應該有很多個錘頭掩面的表情*。

然后

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

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

路由

摘要：由命名路由與子路由構成整體結構，我們用它構建如下頁面。以下兩張圖說明路由和子路由是如何工作的。繼續修改好友信息的路由部分添加好友信息為組件添加動態路由為動態路由添加為路徑參數添加數據下發為組件添加，并使用它。不使用vue-router的情況代碼官方給出下面的例子在不使用vue-router的情況下來實現一個路由。該示例結合了H5歷史管理API、單文件組件、JS模塊相關內容來實現路由...

Aklman 2019-08-22 16:09 評論0 收藏0
Vue.js-狀態管理與Vuex

摘要：學習筆記狀態管理與狀態管理與非父子組件跨級組件和兄弟組件通信時，使用了中央事件總線的一個方法，用來觸發和接收事件，進一步起到通信的作用。倉庫包含了應用的數據狀態和操作過程。新建文件，并寫入的配置，會依賴此配置文件來使用編譯代碼。學習筆記：狀態管理與Vuex 狀態管理與Vuex 非父子組件（跨級組件和兄弟組件）通信時，使用了bus（中央事件總線）的一個方法，用來觸發和接收事件，進一步...

lykops 2019-08-23 16:03 評論0 收藏0
VUE實例圖解

摘要：案例品牌列表構建基本結構利用的樣式數據要雙向更新，所以要用到，同時在后面的中要進行初始化為添加按鈕綁定事件的中，綁定值為關鍵字刪除標簽綁定函數，傳入參數的時候，需要用括號事件修飾符，表示阻止默認事件實例對象新建一個實例函數中初始化需要雙向 VUE案例品牌列表構建基本結構利用bootstrap的樣式 showImg(https://segmentfault.com/img/bVbf...

wqj97 2019-08-23 11:27 評論0 收藏0
vue-router 一些容易被忽略的知識點

摘要：調用全局的守衛。在被激活的組件里調用。用創建好的實例調用守衛中傳給的回調函數。本文適用于對 Vue.js 和 vue-router 有一定程度了解的開發者除特殊說明，vue-router 版本為 3.0.2 正文路由 class 匹配路由匹配后會給該標簽添加 class 屬性值 .router-link-active，該功能在嵌套路由中十分方便 class 的實際屬性值可以通...

chunquedong 2019-08-23 14:58 評論0 收藏0
【Vue.js 牛刀小試】：第十二章 - 使用 Vue Router 實現 Vue 中的前端路由控制

摘要：而路由則是使用了中新增的事件和事件。總結這一章主要是介紹了如何使用在中構建我們的前端路由。系列目錄地址一、基礎知識概覽第一章 - 一些基礎概念（posted at 2018-10-31）第二章 - 常見的指令的使用（posted at 2018-11-01）第三章 - 事件修飾符的使用（posted at 2018-11-02）第四章 - 頁面元素樣式的設定（posted a...

cpupro 2019-05-22 19:26 評論0 收藏0