vue實現(xiàn)側邊欄導航效果
更新時間：2019年10月21日 08:34:31 作者：菜鳥小佳
這篇文章主要為大家詳細介紹了vue實現(xiàn)側邊欄導航效果，右側顯示對應內容，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了vue側邊欄導航的具體代碼，供大家參考，具體內容如下
最終效果
點擊下一個導航，上一個導航自動收回
實現(xiàn)代碼
1.下載vue-router
npm install vue-router --save-dev
2.在main.js中引入
import Vue from 'vue' import Router from 'vue-router' Vue.use(Router) // 引入路由
3.在components中新建組件
3.1 agencySearch.vue組件
代碼：
<template> <div> 直屬下線代理查詢 </div> </template>
3.2 agencySet.vue組件
代碼
<template> <div> 直屬下線代理設置 </div> </template>
3.3 financialIncome.vue組件
代碼
<template> <div> 財務收益數(shù)據(jù)報表 </div> </template>
4.在router下的index.js中引入組件，搭配路由
//4.1引入組件
import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/components/Home' // 主頁
import agencySearch from '@/components/agencySearch' // 直屬下線代理查詢
import agencySet from '@/components/agencySet' // 直屬下線代理設置
Vue.use(Router)
//搭配路由
export default new Router({
mode: 'history',
scrollBehavior: () => ({
y: 0
}),
routes: [
{
// 主頁
path: '/',
component: Home,
name: '代理事物',
iconCls: 'el-icon-message',
children: [{
path: '/agencySearch',
component: agencySearch,
name: '直屬下線代理查詢',
hidden: true
},
{
path: '/agencySet',
component: agencySet,
name: '直屬下線代理設置'
}]
},
{
// 主頁
path: '/',
component: Home,
name: '財務報表',
iconCls: 'el-icon-menu',
children: [{
path: '/financialIncome',
component: financialIncome,
name: '財務收益數(shù)據(jù)報表',
hidden: true
}]
}]
})
5.在主頁Home組件中搭配導航以及路由出口
在el-menu標簽中一定要有 unique-opened 和 router屬性，在el-menu-item中index屬性值等于在router下index.js中配好的路由名字
這個是從element官網(wǎng)截取的
<el-row class="tac"> <el-col :span="24"> <el-menu default-active="1" class="el-menu-vertical-demo" unique-opened router> <el-submenu index="1"> <template slot="title"> <i class="el-icon-message"></i> <span>代理事務</span> </template> <el-menu-item-group> <template slot="title"></template> <el-menu-item index="/agencySearch">直屬下線代理查詢</el-menu-item> <el-menu-item index="/agencySet">直屬下線代理設置</el-menu-item> </el-menu-item-group> </el-submenu> <el-submenu index="2"> <template slot="title"> <i class="el-icon-menu"></i> <span>財務報表</span> </template> <el-menu-item-group> <template slot="title"></template> <el-menu-item index="/financialIncome">財務收益數(shù)據(jù)報表</el-menu-item> </el-menu-item-group> </el-submenu> </el-menu> </el-col> </el-row>
路由出口-右側顯示部分
<el-col :span="24" class="content-wrapper"> <transition name="fade" mode="out-in"> <router-view></router-view> </transition> </el-col>
結語：因為是從寫好的代碼中截取的一部分，可能跑不起來，請見諒，我能理解的原理部分都寫在這里啦。
更多教程點擊《Vue.js前端組件學習教程》，歡迎大家學習閱讀。
關于vue.js組件的教程，請大家點擊專題vue.js組件學習教程進行學習。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
代碼優(yōu)化不僅僅局限在業(yè)務邏輯這塊，像是代碼復用、效率等等都是我們可以加以改進的地方，這篇文章主要給大家介紹了關于Vue項目優(yōu)化的一些實戰(zhàn)策略，需要的朋友們下面隨著小編來一起學習學習吧2021-05-05
今天小編就為大家分享一篇使用electron將vue-cli項目打包成exe的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
Vue基本用法很容易上手,但是有很多優(yōu)化的寫法你就不一定知道了,下面這篇文章主要給大家介紹了關于程序員應該知道的vuex冷門小技巧的相關資料,需要的朋友可以參考下2022-05-05
這篇文章主要介紹了vue實現(xiàn)彈窗引用另一個頁面窗口，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
vue-cli3配置favicon.ico和title的流程
這篇文章主要介紹了vue-cli3配置favicon.ico和title的流程，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-10-10
vue2中provide/inject的使用與響應式傳值詳解
Vue中 Provide/Inject實現(xiàn)了跨組件的通信,下面這篇文章主要給大家介紹了關于vue2中provide/inject的使用與響應式傳值的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-09-09
本文是主要介紹基于Vue的一個組件開發(fā)。本文給大家介紹的非常詳細，具有參考借鑒價值，需要的朋友參考下吧2016-11-11
本文以click為例給大家介紹vue.js中常用v-指令，可以用 v-on 指令監(jiān)聽 DOM 事件，并在觸發(fā)時運行一些 JavaScript代碼，本文通過示例代碼給大家介紹的非常詳細，感興趣的朋友跟隨小編一起看看吧2021-10-10
這篇文章主要為大家介紹了vue實現(xiàn)網(wǎng)易云音樂純界面過程詳解，附含詳細源碼，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-07-07
這篇文章主要介紹了Vue 2.x基礎API的相關資料，文中介紹的非常詳細，對大家具有一定的參考價值，需要的朋友們下面來一起看看吧。2017-03-03