vue實(shí)現(xiàn)側(cè)邊欄導(dǎo)航效果
本文實(shí)例為大家分享了vue側(cè)邊欄導(dǎo)航的具體代碼，供大家參考，具體內(nèi)容如下
最終效果
點(diǎn)擊下一個(gè)導(dǎo)航，上一個(gè)導(dǎo)航自動(dòng)收回
實(shí)現(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> 直屬下線(xiàn)代理查詢(xún) </div> </template>
3.2 agencySet.vue組件
代碼
<template> <div> 直屬下線(xiàn)代理設(shè)置 </div> </template>
3.3 financialIncome.vue組件
代碼
<template> <div> 財(cái)務(wù)收益數(shù)據(jù)報(bào)表 </div> </template>
4.在router下的index.js中引入組件，搭配路由
//4.1引入組件
import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/components/Home' // 主頁(yè)
import agencySearch from '@/components/agencySearch' // 直屬下線(xiàn)代理查詢(xún)
import agencySet from '@/components/agencySet' // 直屬下線(xiàn)代理設(shè)置
Vue.use(Router)
//搭配路由
export default new Router({
mode: 'history',
scrollBehavior: () => ({
y: 0
}),
routes: [
{
// 主頁(yè)
path: '/',
component: Home,
name: '代理事物',
iconCls: 'el-icon-message',
children: [{
path: '/agencySearch',
component: agencySearch,
name: '直屬下線(xiàn)代理查詢(xún)',
hidden: true
},
{
path: '/agencySet',
component: agencySet,
name: '直屬下線(xiàn)代理設(shè)置'
}]
},
{
// 主頁(yè)
path: '/',
component: Home,
name: '財(cái)務(wù)報(bào)表',
iconCls: 'el-icon-menu',
children: [{
path: '/financialIncome',
component: financialIncome,
name: '財(cái)務(wù)收益數(shù)據(jù)報(bào)表',
hidden: true
}]
}]
})
5.在主頁(yè)Home組件中搭配導(dǎo)航以及路由出口
在el-menu標(biāo)簽中一定要有 unique-opened 和 router屬性，在el-menu-item中index屬性值等于在router下index.js中配好的路由名字
這個(gè)是從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>代理事務(wù)</span> </template> <el-menu-item-group> <template slot="title"></template> <el-menu-item index="/agencySearch">直屬下線(xiàn)代理查詢(xún)</el-menu-item> <el-menu-item index="/agencySet">直屬下線(xiàn)代理設(shè)置</el-menu-item> </el-menu-item-group> </el-submenu> <el-submenu index="2"> <template slot="title"> <i class="el-icon-menu"></i> <span>財(cái)務(wù)報(bào)表</span> </template> <el-menu-item-group> <template slot="title"></template> <el-menu-item index="/financialIncome">財(cái)務(wù)收益數(shù)據(jù)報(bào)表</el-menu-item> </el-menu-item-group> </el-submenu> </el-menu> </el-col> </el-row>
路由出口-右側(cè)顯示部分
<el-col :span="24" class="content-wrapper"> <transition name="fade" mode="out-in"> <router-view></router-view> </transition> </el-col>
結(jié)語(yǔ)：因?yàn)槭菑膶?xiě)好的代碼中截取的一部分，可能跑不起來(lái)，請(qǐng)見(jiàn)諒，我能理解的原理部分都寫(xiě)在這里啦。
更多教程點(diǎn)擊《Vue.js前端組件學(xué)習(xí)教程》，歡迎大家學(xué)習(xí)閱讀。
關(guān)于vue.js組件的教程，請(qǐng)大家點(diǎn)擊專(zhuān)題vue.js組件學(xué)習(xí)教程進(jìn)行學(xué)習(xí)。
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
vue項(xiàng)目中仿element-ui彈框效果的實(shí)例代碼
這篇文章主要介紹了vue項(xiàng)目中仿element-ui彈框效果的實(shí)例代碼，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-04-04
vue?結(jié)合webpack的初級(jí)使用指南小白學(xué)習(xí)篇
這篇文章主要為大家介紹了vue?結(jié)合webpack的初級(jí)使用指南非常適合入門(mén)webpack的小白學(xué)習(xí)，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-05-05
這篇文章主要介紹了WebPack配置vue多頁(yè)面的方法，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-05-05
Vue3中的shallowRef?和shallowReactive對(duì)比分析
這篇文章主要介紹了Vue3中的shallowRef?和shallowReactive,通過(guò)示例代碼逐一對(duì)他們的使用做的詳細(xì)介紹，文末補(bǔ)充介紹了vue3的shallowRef()、shallowReactive()和shallowReadonly()的使用，需要的朋友可以參考下2023-01-01
使用vue-infinite-scroll實(shí)現(xiàn)無(wú)限滾動(dòng)效果
vue-infinite-scroll插件可以無(wú)限滾動(dòng)實(shí)現(xiàn)加載更多，其作用是是當(dāng)滾動(dòng)條滾動(dòng)到距離底部的指定高度時(shí)觸發(fā)某個(gè)方法。這篇文章主要介紹了用vue-infinite-scroll實(shí)現(xiàn)無(wú)限滾動(dòng)效果,需要的朋友可以參考下2018-06-06
vue3中unplugin-auto-import自動(dòng)引入示例代碼
unplugin-auto-import 這個(gè)插件是為了解決在開(kāi)發(fā)中的導(dǎo)入問(wèn)題,下面這篇文章主要給大家介紹了關(guān)于vue3中unplugin-auto-import自動(dòng)引入的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-02-02
vueJs函數(shù)readonly與shallowReadonly使用對(duì)比詳解
這篇文章主要為大家介紹了vueJs函數(shù)readonly與shallowReadonly使用對(duì)比詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-03-03
每天學(xué)點(diǎn)Vue源碼之vm.$mount掛載函數(shù)
這篇文章主要介紹了vm.$mount掛載函數(shù)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03
vue+iview框架實(shí)現(xiàn)左側(cè)動(dòng)態(tài)菜單功能的示例代碼
這篇文章主要介紹了vue+iview框架實(shí)現(xiàn)左側(cè)動(dòng)態(tài)菜單功能，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-07-07
Vue啟動(dòng)失敗報(bào)錯(cuò):Module?not?found:?Error:?Can‘t?resolve?&apos
這篇文章主要給大家介紹了關(guān)于Vue啟動(dòng)失敗報(bào)錯(cuò):Module?not?found:?Error:?Can‘t?resolve?'less-loader'解決的相關(guān)資料,文中通過(guò)圖文介紹的非常詳細(xì),需要的朋友可以參考下2023-03-03