您好,登錄后才能下訂單哦!
這篇文章主要介紹“vue.js如何使用Element-ui中實(shí)現(xiàn)導(dǎo)航菜單”,在日常操作中,相信很多人在vue.js如何使用Element-ui中實(shí)現(xiàn)導(dǎo)航菜單問(wèn)題上存在疑惑,小編查閱了各式資料,整理出簡(jiǎn)單好用的操作方法,希望對(duì)大家解答”vue.js如何使用Element-ui中實(shí)現(xiàn)導(dǎo)航菜單”的疑惑有所幫助!接下來(lái),請(qǐng)跟著小編一起來(lái)學(xué)習(xí)吧!
先放圖吧
大體實(shí)現(xiàn)思路我先講一下不然下面代碼片段會(huì)看懵,
圈出來(lái)的左右兩部分,左邊是element復(fù)制就可實(shí)現(xiàn),
右邊是跳轉(zhuǎn)的子組件。
首先創(chuàng)建導(dǎo)航菜單的vue文件,但這個(gè)文件里面只是引入組件,里面使用Container布局容器實(shí)現(xiàn)左右兩部分,左邊el-aside標(biāo)簽中放入導(dǎo)航菜單的組件,右邊el-main標(biāo)簽中寫<router-view></router-view>實(shí)現(xiàn)路由跳轉(zhuǎn)即可
導(dǎo)航菜單文件我起名為Elnav.vue
<template> <div class="app"> <el-container> <el-aside> <navmenu></navmenu> </el-aside> <el-main> <router-view></router-view> </el-main> </el-container> </div> </template> <script> import navmenu from './navmenu' export default { data() { return { } }, components:{ navmenu } } </script> <style scoped> </style>
里面主要引入navmenu組件(navmenu組件就是elemet中的樣式)
navmenu.vue中
注意設(shè)置 default-active="$route.path"以及組件跳轉(zhuǎn)(選項(xiàng)一/二)的index值
<template> <div> <el-row> <el-col> <el-menu default-active="$route.path" router class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" > <el-submenu index="1"> <template slot="title"> <i class="el-icon-location"></i> <span>導(dǎo)航一</span> </template> <el-menu-item-group> <template slot="title">分組一</template> <el-menu-item index="/Elnav/one">選項(xiàng)1</el-menu-item> <el-menu-item index="/Elnav/two">選項(xiàng)2</el-menu-item> </el-menu-item-group> <el-menu-item-group title="分組2"> <el-menu-item index="1-3">選項(xiàng)3</el-menu-item> </el-menu-item-group> <el-submenu index="1-4"> <template slot="title">選項(xiàng)4</template> <el-menu-item index="1-4-1">選項(xiàng)1</el-menu-item> </el-submenu> </el-submenu> </el-menu> </el-col> </el-row> </div> </template> <script> export default { methods: { handleOpen(key, keyPath) { console.log(key, keyPath); }, handleClose(key, keyPath) { console.log(key, keyPath); } }, mounted() { console.log(this.$route); } }; </script> <style> </style>
接下來(lái)就是路由的配置
{ path: "/Elnav", name: "Elnav", component: () => import("../components/Elnav.vue"), children:[ { path: "/Elnav/one", name: "one", component: () => import("../components/one.vue") }, { path: "/Elnav/two", name: "two", component: () => import("../components/two.vue") } ] }
至于右邊內(nèi)容的one.vue以及其他vue文件的內(nèi)容就自己寫即可
到此,關(guān)于“vue.js如何使用Element-ui中實(shí)現(xiàn)導(dǎo)航菜單”的學(xué)習(xí)就結(jié)束了,希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí),快去試試吧!若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí),請(qǐng)繼續(xù)關(guān)注億速云網(wǎng)站,小編會(huì)繼續(xù)努力為大家?guī)?lái)更多實(shí)用的文章!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。