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