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組件學習教程進行學習。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了vue項目中仿element-ui彈框效果的實例代碼，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2019-04-04
這篇文章主要為大家介紹了vue?結合webpack的初級使用指南非常適合入門webpack的小白學習，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-05-05
這篇文章主要介紹了WebPack配置vue多頁面的方法，本文給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2018-05-05
Vue3中的shallowRef?和shallowReactive對比分析
這篇文章主要介紹了Vue3中的shallowRef?和shallowReactive,通過示例代碼逐一對他們的使用做的詳細介紹，文末補充介紹了vue3的shallowRef()、shallowReactive()和shallowReadonly()的使用，需要的朋友可以參考下2023-01-01
使用vue-infinite-scroll實現(xiàn)無限滾動效果
vue-infinite-scroll插件可以無限滾動實現(xiàn)加載更多，其作用是是當滾動條滾動到距離底部的指定高度時觸發(fā)某個方法。這篇文章主要介紹了用vue-infinite-scroll實現(xiàn)無限滾動效果,需要的朋友可以參考下2018-06-06
vue3中unplugin-auto-import自動引入示例代碼
unplugin-auto-import 這個插件是為了解決在開發(fā)中的導入問題,下面這篇文章主要給大家介紹了關于vue3中unplugin-auto-import自動引入的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2023-02-02
vueJs函數(shù)readonly與shallowReadonly使用對比詳解
這篇文章主要為大家介紹了vueJs函數(shù)readonly與shallowReadonly使用對比詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-03-03
這篇文章主要介紹了vm.$mount掛載函數(shù)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-03-03
vue+iview框架實現(xiàn)左側動態(tài)菜單功能的示例代碼
這篇文章主要介紹了vue+iview框架實現(xiàn)左側動態(tài)菜單功能，本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-07-07
Vue啟動失敗報錯:Module?not?found:?Error:?Can‘t?resolve?&apos
這篇文章主要給大家介紹了關于Vue啟動失敗報錯:Module?not?found:?Error:?Can‘t?resolve?'less-loader'解決的相關資料,文中通過圖文介紹的非常詳細,需要的朋友可以參考下2023-03-03