vue實(shí)現(xiàn)頂部導(dǎo)航欄以及跳轉(zhuǎn)
一、項(xiàng)目結(jié)構(gòu)
二、實(shí)現(xiàn)
1、參考Element
我們可以快速的編寫(xiě)一個(gè)簡(jiǎn)單的頂部導(dǎo)航欄
2、我們?cè)贓lement的基礎(chǔ)上
將我們的參數(shù)添加到代碼中，需要注意的是，如果在父層級(jí)的index中，如果沒(méi)有添加 “/”標(biāo)識(shí)的話，router的自動(dòng)跳轉(zhuǎn)會(huì)出問(wèn)題，在父層級(jí)跳到其他父層級(jí)的自層級(jí)下后，再次返回該層級(jí)，路徑會(huì)直接修改后綴，從而導(dǎo)致跳轉(zhuǎn)失敗
<template>
<div>
<el-header>
<div>
<el-row style="text-align: center;min-height: 60px;">
<el-col :span="4">
<el-image
class="brandArea"
:src="brandImg"
:fit="fit"></el-image>
</el-col>
<el-col :span="18">
<el-menu
router="router"
:default-active="activeIndex"
:active-text-color="activeColor"
class="el-menu-demo"
style="position:static;"
mode="horizontal"
@select="handleSelect">
<el-row>
<el-col :span="4">
<el-menu-item index="/home">首頁(yè)</el-menu-item>
</el-col>
<el-col :span="4">
<el-submenu index="/blog">
<template slot="title">博客</template>
<el-menu-item index="/blog/blogMain">首頁(yè)</el-menu-item>
<el-menu-item index="/blog/blogSelf">我的</el-menu-item>
</el-submenu>
</el-col>
<el-col :span="4">
<el-menu-item index="2">音樂(lè)</el-menu-item>
</el-col>
<el-col :span="4">
<el-menu-item index="3" disabled>視頻</el-menu-item>
</el-col>
<el-col :span="4">
<el-menu-item index="4">游戲</el-menu-item>
</el-col>
<el-col :span="4">
<el-menu-item index="5">社區(qū)</el-menu-item>
</el-col>
</el-row>
</el-menu>
</el-col>
<el-col :span="2">
<el-image
class="headArea"
:src="headImg"
:fit="fit"></el-image>
</el-col>
</el-row>
</div>
</el-header>
</div>
</template><script>
import {
queryToken,
} from "@/api/base/base.js"
import "@/css/base.css"
export default {
name: "homeHead",
data(){
return{
fit: 'contain',
headImg: require("@/img/headImg.jpg"),
brandImg: require("@/img/brand_img.jpg"),
activeIndex: '/home',
activeColor: '#409EFF',
}
},
methods: {
getToken(){
queryToken().then(
response => {
console.info(response);
}).catch(() => {
});
},
handleSelect(key, keyPath) {
console.log(key, keyPath);
}
}
}
</script>3、這是導(dǎo)航欄代碼
這時(shí)我們就需要考慮，我們已經(jīng)編寫(xiě)了導(dǎo)航欄，如何把導(dǎo)航欄添加到每個(gè)頁(yè)面上了，一是編寫(xiě)公共項(xiàng)目，二是在每個(gè)頁(yè)面上都添加頭文件，顯然，二我們是不考慮的，所以我們需要編寫(xiě)一個(gè)公共文件，或者直接使用App.vue
4、首先考慮直接使用App.vue的情況
我們先將App.vue改進(jìn)下
<template>
<div>
<div>
<HomeHead></HomeHead>
</div>
<div>
<router-view></router-view>
</div>
</div>
</template><script>
import HomeHead from '@/views/base/homeHead'
export default {
name: 'App',
components: {
HomeHead
}
}
</script>5、但是我們?cè)诘谝徊骄蜁?huì)發(fā)現(xiàn)問(wèn)題
登陸頁(yè)以及注冊(cè)頁(yè)也出現(xiàn)了導(dǎo)航欄，我們肯定不希望這種情況出現(xiàn)的，所以我們就需要開(kāi)始寫(xiě)路由，然后在路由中添加跳轉(zhuǎn)路徑，以及顯示條件
6、修改路由
先在路由中添加keepAlive字段，然后修改App.vue，加入v-if
7、到這個(gè)時(shí)候我們已經(jīng)完成了
一個(gè)簡(jiǎn)單的導(dǎo)航欄的實(shí)現(xiàn)，這時(shí)我們?cè)趯?xiě)路由的時(shí)候是不需要填寫(xiě)子層級(jí)的，只需要在路徑上添加對(duì)應(yīng)父層級(jí)的標(biāo)識(shí)即可
例如：
注：
其中的class文件我并沒(méi)有添加什么特殊的，大家可以隨便設(shè)置下，因?yàn)楸容^簡(jiǎn)單，所以代碼就不上傳了，等我寫(xiě)完整個(gè)項(xiàng)目后我會(huì)一步步的寫(xiě)出來(lái)我的項(xiàng)目流程的
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
基于vue2.0的活動(dòng)倒計(jì)時(shí)組件countdown(附源碼下載)
這是一款基于vue2.0的活動(dòng)倒計(jì)時(shí)組件，可以使用服務(wù)端時(shí)間作為當(dāng)前時(shí)間，在倒計(jì)時(shí)開(kāi)始和結(jié)束時(shí)可以自定義回調(diào)函數(shù)。這篇文章主要介紹了基于vue2.0的活動(dòng)倒計(jì)時(shí)組件countdown,需要的朋友可以參考下2018-10-10
這篇文章主要介紹了.vue?組件打包成?.js的操作方法,本文給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧2024-07-07
解決vue路由發(fā)生了跳轉(zhuǎn)但是界面沒(méi)有任何反應(yīng)問(wèn)題
這篇文章主要介紹了解決vue路由發(fā)生了跳轉(zhuǎn)但是界面沒(méi)有任何反應(yīng)問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-04-04
前端vue3實(shí)現(xiàn)圖片懶加載的完整步驟記錄
在現(xiàn)代前端開(kāi)發(fā)中懶加載是一種提高應(yīng)用性能和用戶體驗(yàn)的重要技術(shù),尤其是在處理較大圖片或長(zhǎng)列表數(shù)據(jù)時(shí),這篇文章主要介紹了前端vue3實(shí)現(xiàn)圖片懶加載的相關(guān)資料,需要的朋友可以參考下2025-06-06
這篇文章主要為大家介紹了JointJS流程圖的繪制方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-12-12
3分鐘了解vue數(shù)據(jù)劫持的原理實(shí)現(xiàn)
這篇文章主要介紹了3分鐘了解vue數(shù)據(jù)劫持的原理實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
最近公司在做一個(gè)基于vue開(kāi)發(fā)的項(xiàng)目，項(xiàng)目需要開(kāi)發(fā)一個(gè)展示組織架構(gòu)的樹(shù)組件，在網(wǎng)上搜了半天，沒(méi)有找到合適的，下面小編給大家分享一個(gè)基于Vue制作組織架構(gòu)樹(shù)組件，需要的朋友參考下吧2017-12-12
這篇文章主要介紹了vue-cli4.0如何配置CDN加速問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-04-04
Vue3中使用ref標(biāo)簽對(duì)組件進(jìn)行操作方法
這篇文章主要介紹了Vue3中使用ref標(biāo)簽對(duì)組件進(jìn)行操作方法,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-04-04
vue實(shí)現(xiàn)圖片滾動(dòng)的示例代碼(類似走馬燈效果)
下面小編就為大家分享一篇vue實(shí)現(xiàn)圖片滾動(dòng)的示例代碼(類似走馬燈效果)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-03-03