vue實(shí)現(xiàn)頂部導(dǎo)航欄以及跳轉(zhuǎn)
一、項(xiàng)目結(jié)構(gòu)
二、實(shí)現(xiàn)
1、參考Element
我們可以快速的編寫一個(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)編寫了導(dǎo)航欄，如何把導(dǎo)航欄添加到每個(gè)頁(yè)面上了，一是編寫公共項(xiàng)目，二是在每個(gè)頁(yè)面上都添加頭文件，顯然，二我們是不考慮的，所以我們需要編寫一個(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)始寫路由，然后在路由中添加跳轉(zhuǎn)路徑，以及顯示條件
6、修改路由
先在路由中添加keepAlive字段，然后修改App.vue，加入v-if
7、到這個(gè)時(shí)候我們已經(jīng)完成了
一個(gè)簡(jiǎn)單的導(dǎo)航欄的實(shí)現(xiàn)，這時(shí)我們?cè)趯懧酚傻臅r(shí)候是不需要填寫子層級(jí)的，只需要在路徑上添加對(duì)應(yīng)父層級(jí)的標(biāo)識(shí)即可
例如：
注：
其中的class文件我并沒(méi)有添加什么特殊的，大家可以隨便設(shè)置下，因?yàn)楸容^簡(jiǎn)單，所以代碼就不上傳了，等我寫完整個(gè)項(xiàng)目后我會(huì)一步步的寫出來(lái)我的項(xiàng)目流程的
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue實(shí)現(xiàn)導(dǎo)入json解析成動(dòng)態(tài)el-table樹(shù)表格
本文主要介紹了vue實(shí)現(xiàn)導(dǎo)入json解析成動(dòng)態(tài)el-table樹(shù)表格，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-02-02
Vue.js實(shí)戰(zhàn)之組件之間的數(shù)據(jù)傳遞
這篇文章主要介紹了Vue.js實(shí)戰(zhàn)之組件之間的數(shù)據(jù)傳遞的相關(guān)資料，文中通過(guò)示例代碼和圖文介紹的非常詳細(xì)，對(duì)大家具有一定的參考價(jià)值，需要的朋友們下面來(lái)一起看看吧。2017-04-04
這篇文章主要為大家詳細(xì)介紹了Vue的diff算法原理，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助2022-03-03
玩轉(zhuǎn)vue的slot內(nèi)容分發(fā)
這篇文章主要介紹了玩轉(zhuǎn)vue的slot內(nèi)容分發(fā)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
小編給大家整理Vue底層實(shí)現(xiàn)原理的知識(shí)點(diǎn)總結(jié)，如果大家對(duì)此有需要，可以學(xué)習(xí)參考下，希望我們整理的內(nèi)容能夠幫助到你。2018-02-02
在vue中使用eacharts創(chuàng)建graph關(guān)系圖方式
這篇文章主要介紹了在vue中使用eacharts創(chuàng)建graph關(guān)系圖方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
Vue開(kāi)發(fā)中出現(xiàn)Loading?Chunk?Failed的問(wèn)題解決
本文主要介紹了Vue開(kāi)發(fā)中出現(xiàn)Loading?Chunk?Failed的問(wèn)題解決，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-03-03
vue使用element-ui的el-image的問(wèn)題分析
這篇文章主要介紹了vue使用element-ui的el-image的問(wèn)題分析,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-01-01
vue axios數(shù)據(jù)請(qǐng)求get、post方法及實(shí)例詳解
axios是一個(gè)基于Promise,同時(shí)支持瀏覽器端和Node.js的HTTP庫(kù)，常用于Ajax請(qǐng)求。這篇文章主要介紹了vue axios數(shù)據(jù)請(qǐng)求get、post方法的使用 ,需要的朋友可以參考下2018-09-09
這篇文章主要為大家詳細(xì)介紹了如何利用Vue和Echarts實(shí)現(xiàn)繪制折線圖，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2023-05-05