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> 直屬下線代理查詢 </div> </template>
3.2 agencySet.vue組件
代碼
<template> <div> 直屬下線代理設(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' // 主頁
import agencySearch from '@/components/agencySearch' // 直屬下線代理查詢
import agencySet from '@/components/agencySet' // 直屬下線代理設(shè)置
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: '直屬下線代理設(shè)置'
}]
},
{
// 主頁
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.在主頁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">直屬下線代理查詢</el-menu-item> <el-menu-item index="/agencySet">直屬下線代理設(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àn)槭菑膶懞玫拇a中截取的一部分，可能跑不起來，請見諒，我能理解的原理部分都寫在這里啦。
更多教程點(diǎn)擊《Vue.js前端組件學(xué)習(xí)教程》，歡迎大家學(xué)習(xí)閱讀。
關(guān)于vue.js組件的教程，請大家點(diǎn)擊專題vue.js組件學(xué)習(xí)教程進(jìn)行學(xué)習(xí)。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
Vue項(xiàng)目優(yōu)化的一些實(shí)戰(zhàn)策略
代碼優(yōu)化不僅僅局限在業(yè)務(wù)邏輯這塊，像是代碼復(fù)用、效率等等都是我們可以加以改進(jìn)的地方，這篇文章主要給大家介紹了關(guān)于Vue項(xiàng)目優(yōu)化的一些實(shí)戰(zhàn)策略，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-05-05
使用electron將vue-cli項(xiàng)目打包成exe的方法
今天小編就為大家分享一篇使用electron將vue-cli項(xiàng)目打包成exe的方法，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
Vue基本用法很容易上手,但是有很多優(yōu)化的寫法你就不一定知道了,下面這篇文章主要給大家介紹了關(guān)于程序員應(yīng)該知道的vuex冷門小技巧的相關(guān)資料,需要的朋友可以參考下2022-05-05
vue實(shí)現(xiàn)彈窗引用另一個(gè)頁面窗口
這篇文章主要介紹了vue實(shí)現(xiàn)彈窗引用另一個(gè)頁面窗口，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
vue-cli3配置favicon.ico和title的流程
這篇文章主要介紹了vue-cli3配置favicon.ico和title的流程，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-10-10
vue2中provide/inject的使用與響應(yīng)式傳值詳解
Vue中 Provide/Inject實(shí)現(xiàn)了跨組件的通信,下面這篇文章主要給大家介紹了關(guān)于vue2中provide/inject的使用與響應(yīng)式傳值的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-09-09
本文是主要介紹基于Vue的一個(gè)組件開發(fā)。本文給大家介紹的非常詳細(xì)，具有參考借鑒價(jià)值，需要的朋友參考下吧2016-11-11
本文以click為例給大家介紹vue.js中常用v-指令，可以用 v-on 指令監(jiān)聽 DOM 事件，并在觸發(fā)時(shí)運(yùn)行一些 JavaScript代碼，本文通過示例代碼給大家介紹的非常詳細(xì)，感興趣的朋友跟隨小編一起看看吧2021-10-10
vue實(shí)現(xiàn)網(wǎng)易云音樂純界面
這篇文章主要為大家介紹了vue實(shí)現(xiàn)網(wǎng)易云音樂純界面過程詳解，附含詳細(xì)源碼，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
這篇文章主要介紹了Vue 2.x基礎(chǔ)API的相關(guān)資料，文中介紹的非常詳細(xì)，對大家具有一定的參考價(jià)值，需要的朋友們下面來一起看看吧。2017-03-03