小編給大家分享一下vue如何掛載路由到頭部導航,相信大部分人都還不怎么了解,因此分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后大有收獲,下面讓我們一起去了解一下吧!
路由是寫好了,但正確的切換路由方式不應該是我們在地址欄里面輸入地址,有追求的方式是點擊頭部的導航菜單來切換,就像這樣
我們點擊上面的發(fā)現(xiàn)、關注、消息就切換路由導航
我們先把頭部的導航寫好
打開header.vue
先把vue組件的基本格式寫好
然后開始布局寫頭部
這里很不好意思,我一直以為頭部的header.vue是引入了的,實際上并沒有........
打開app,vue重新編寫一下
app.vue 代碼:
<template> <div id="app"> <!-- element-ui 容器布局 --> <el-container> <!-- 頭部 --> <el-header> <!-- 頭部組件渲染 --> <header-ly></header-ly> </el-header> <!-- 中間主要區(qū)域容器 --> <el-container> <!-- 添加一個element-ui內(nèi)置的過渡動畫 --> <transition name="el-zoom-in-center"> <!-- 通過路由渲染不同內(nèi)容的頁面 --> <router-view/> </transition> </el-container> <!-- 底部 --> <el-footer> <!-- 底部組件渲染 --> <footer-ly></footer-ly> </el-footer> </el-container> </div> </template> <script> // 導入組件 import HeaderLy from '@/components/header' import FooterLy from '@/components/footer' export default { name: 'app', components: { HeaderLy, FooterLy } } </script> <style> #app { font-family: 'Avenir', Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; } </style>
編寫頭部header.vue,這里的代碼基本上可以從element-ui官網(wǎng)上直接copy,地址:http://element-cn.eleme.io/#/zh-CN/
<template> <el-row> <!-- 左邊logo --> <el-col :span="4" class="logo"> <img src="../assets/logo.png" > </el-col> <!-- 中間導航區(qū)域 --> <el-col :span="16"> <el-menu :default-active="activeIndex2" class="menu" router mode="horizontal" @select="handleSelect" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b"> <el-menu-item index="1">處理中心</el-menu-item> <el-submenu index="2"> <template slot="title">我的工作臺</template> <el-menu-item index="2-1">選項1</el-menu-item> <el-menu-item index="2-2">選項2</el-menu-item> <el-menu-item index="2-3">選項3</el-menu-item> </el-submenu> <el-menu-item index="3"><a href="https://www.ele.me" rel="external nofollow" target="_blank">訂單管理</a></el-menu-item> </el-menu> </el-col> <!-- 右邊用戶信息以及登陸注冊 --> <el-button-group> <el-button type="danger" size="small" round >login</el-button> <el-button type="success" size="small" round >regin</el-button> </el-button-group> </el-row> </template> <script> export default { // ... } </script> <style scoped> </style>
這個時候瀏覽器中是這樣的
樣子很丑,但這不是重點,我們點擊導航的時候,他直接跳到的是<el-menu-item index="2-1">xxxxxx<el-menu-item>,
這里面的index,所以最笨的辦法就是改index的值就行了,但這樣就不夠靈活了....
一般寫導航的辦法是這樣的
<template> <el-row> <!-- 左邊logo --> <el-col :span="4" class="logo"> <img src="../assets/logo.png" > </el-col> <!-- 中間導航區(qū)域 --> <el-col :span="16"> <el-menu :default-active="$route.path" class="menu" router mode="horizontal" @select="handleSelect" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b"> <!-- 循環(huán)寫的路由,其中路由中有 hidden:true 的就不加入循環(huán) --> <template v-for="route in $router.options.routes" v-if="!route.hidden"> <!-- 循環(huán)沒有children的路由 --> <el-menu-item v-if="!route.hasChild" :key="route.path" :index="route.path" > {{ route.name }} </el-menu-item> <!-- 循環(huán)有children的路由 --> <el-submenu v-else :index="route.path"> <template slot="title">{{ route.name }}</template> <el-menu-item v-for="child in route.children" :index="child.path" :key="child.path"> {{ child.name }} </el-menu-item> </el-submenu> </template> </el-menu> </el-col> <!-- 右邊用戶信息以及登陸注冊 --> <el-button-group> <el-button type="danger" size="small" round >login</el-button> <el-button type="success" size="small" round >regin</el-button> </el-button-group> </el-row> </template> <script> export default { // ... methods: { handleSelect () { console.log('菜單選擇之后的回調(diào)操作') } } } </script> <style scoped> </style>
這樣在瀏覽器中的效果
這樣點擊導航菜單之后的跳轉(zhuǎn)就完全正常了,這樣寫的好處就是很靈活,如果要加icon圖標的話,也可以直接在router/index.js里面的配置路由部分加個字段class:classname,然后在循環(huán)的時候輸出就可以了。當然這里一般是不把首頁這個導航菜單顯示出來的,我們可以直接在路由配置中加個hidden:true 就實現(xiàn)了
就像這樣
效果
只需要簡單的修改就可以完成了
這樣在導航上掛路由就完成了,接下來寫寫樣式,完善一下功能header.vue就差不多完成了
以上是“vue如何掛載路由到頭部導航”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內(nèi)容對大家有所幫助,如果還想學習更多知識,歡迎關注創(chuàng)新互聯(lián)成都網(wǎng)站設計公司行業(yè)資訊頻道!
另外有需要云服務器可以了解下創(chuàng)新互聯(lián)scvps.cn,海內(nèi)外云服務器15元起步,三天無理由+7*72小時售后在線,公司持有idc許可證,提供“云服務器、裸金屬服務器、高防服務器、香港服務器、美國服務器、虛擬主機、免備案服務器”等云主機租用服務以及企業(yè)上云的綜合解決方案,具有“安全穩(wěn)定、簡單易用、服務可用性高、性價比高”等特點與優(yōu)勢,專為企業(yè)上云打造定制,能夠滿足用戶豐富、多元化的應用場景需求。
新聞名稱:vue如何掛載路由到頭部導航-創(chuàng)新互聯(lián)
本文地址:http://sd-ha.com/article0/dghsoo.html
成都網(wǎng)站建設公司_創(chuàng)新互聯(lián),為您提供網(wǎng)站建設、動態(tài)網(wǎng)站、全網(wǎng)營銷推廣、網(wǎng)站內(nèi)鏈、外貿(mào)網(wǎng)站建設、響應式網(wǎng)站
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容