vue2+el-menu實現(xiàn)路由跳轉及當前項的設置方法實例

更新時間：2017年11月07日 08:35:03 作者：iulyf

這篇文章主要介紹了vue2+el-menu實現(xiàn)路由跳轉及當前項的設置,方法實例代碼詳解，非常不錯，具有參考借鑒價值，需要的朋友可以參考下

Vue.js 是什么

Vue.js (讀音 /vjuː/，類似于 view) 是一套構建用戶界面的漸進式框架。與其他重量級框架不同的是，Vue 采用自底向上增量開發(fā)的設計。Vue 的核心庫只關注視圖層，它不僅易于上手，還便于與第三方庫或既有項目整合。另一方面，當與單文件組件和 Vue 生態(tài)系統(tǒng)支持的庫結合使用時，Vue 也完全能夠為復雜的單頁應用程序提供驅動。

好了，下面通過本文給大家介紹vue2+el-menu實現(xiàn)路由跳轉及當前項的設置方法，具體內容如下所示：

<span style="font-size:24px;" deep="5"><el-menu router :default-active="$route.path" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" theme="dark"> 
 <el-submenu index="1"> 
  <template slot="title"> 
   <i class="el-icon-location"></i> 
   <span>用戶信息</span> 
  </template> 
  <el-menu-item-group> 
   <el-menu-item index="/user/account">賬號信息</el-menu-item> 
   <el-menu-item index="/user/password">修改密碼</el-menu-item> 
 </el-submenu> 
 <el-submenu index="2"> 
   <template slot="title"> 
   <i class="el-icon-location"></i> 
   <span>公司信息</span> 
  </template> 
  <el-menu-item-group> 
   <el-menu-item index="/company/userManager">用戶管理</el-menu-item> 
   <el-menu-item index="/company/editUser">添加/編輯用戶</el-menu-item> 
  </el-menu-item-group> 
  </el-submenu> 
</el-menu></span>

1.要實現(xiàn)路由跳轉，先要在el-menu標簽上添加router屬性，然后只要在每個el-menu-item標簽內的index屬性設置一下url即可實現(xiàn)點擊el-menu-item實現(xiàn)路由跳轉。

2.導航當前項，在el-menu標簽中綁定 :default-active="$route.path",注意是綁定屬性，不要忘了加“:”,當$route.path等于el-menu-item標簽中的index屬性值時則該item為當前項。

總結

以上所述是小編給大家介紹的vue2+el-menu實現(xiàn)路由跳轉及當前項的設置方法實例，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持！

您可能感興趣的文章:

老生常談Vue中的偵聽器watch
開發(fā)中我們在data返回的對象中定義了數(shù)據(jù)，這個數(shù)據(jù)通過插值語法等方式綁定到template中，這篇文章主要介紹了Vue中的偵聽器watch,需要的朋友可以參考下
2022-10-10
Vue中inheritAttrs的使用實例詳解
這篇文章主要介紹了Vue中inheritAttrs的使用實例詳解,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2020-12-12
Vue下拉選擇框Select組件使用詳解(二)
這篇文章主要為大家詳細介紹了Vue下拉選擇框Select組件的使用，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2022-03-03
vue組件講解(is屬性的用法)模板標簽替換操作
這篇文章主要介紹了vue組件講解(is屬性的用法)模板標簽替換操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2020-09-09
Vue封裝通用table組件的完整步驟記錄
對于一個中后臺類的項目,一個比較常見的展示形式就是Table了,這篇文章主要給大家介紹了關于Vue封裝通用table組件的相關資料,需要的朋友可以參考下
2021-07-07
利用Vue3實現(xiàn)鼠標跟隨效果
在Web開發(fā)領域,鼠標跟隨效果是一種能顯著提升頁面交互性、增加動態(tài)感與趣味性的常見方式,下面我們看看如何使用Vue3實現(xiàn)鼠標跟隨效果吧
2024-11-11
vue項目啟動端口更改的實現(xiàn)
在Vue前端項目中,可以通過修改配置文件來指定啟動的端口號,本文就來介紹一下vue項目啟動端口更改的實現(xiàn),感興趣的可以了解一下
2023-10-10
VUE組件簡明講解
組件是什么？組件是用基礎的元素組成的復雜的、可以重復使用的代碼單元，就相當于疊疊樂一樣的快件，可以將這些復用的代碼封裝其起來構成的組件可需要的時候進行調用
2022-08-08
Vue之Pinia狀態(tài)管理
這篇文章主要介紹了Vue中Pinia狀態(tài)管理，Pinia開始于大概2019年，其目的是設計一個擁有組合式 API 的 Vue 狀態(tài)管理庫，Pinia本質上依然是一個狀態(tài)管理庫，用于跨組件、頁面進行狀態(tài)共享，感興趣的同學可以參考閱讀
2023-04-04
vue中如何給靜態(tài)資源增加路由前綴
這篇文章主要介紹了vue中如何給靜態(tài)資源增加路由前綴，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-12-12