vue項目如何引入公共頭部底部
更新時間：2023年01月13日 14:46:59 作者：久愛@勿忘
這篇文章主要介紹了vue項目如何引入公共頭部底部問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
vue項目引入公共頭部底部
1.在components文件下創(chuàng)建頭部（header.vue）和底部（footer.vue）文件，名字自定義
2.修改router下的index.js
把頭部文件和底部文件在index.js進(jìn)行注冊
import header from '@/components/header'
底部同理，
3.在app.vue文件中引入注冊
import HerderLogin from "./components/header"
components:{
HerderLogin
}
定義的標(biāo)簽為herder-login這樣的，注冊是要寫成駝峰式寫法HerderLogin
直接使用header當(dāng)做注冊標(biāo)簽，可能注冊的組件會不起作用
vue項目抽離頭部導(dǎo)航欄以及底部
如果不抽離出來，而是在每個頁面里都寫一遍的話，那你如果要改個跳轉(zhuǎn)地址，或者名字，極其費勁兒。
首先，在src/components下新建一個layout文件夾，新建head.vue，把頭部導(dǎo)航html、css及js剪切過來就可以。
然后，在App.vue中：
引入Head
import ?Head ?from './components/layout/head'
導(dǎo)出
export default {
? name: 'App',
?? ?components: {
?? ??? ?Tabbar,
?? ??? ?TabbarItem,
? ? ?? ?Head
?? ?},
}使用
<template> ? <div id="app"> ? ? ?<Head></Head> ? ? <router-view></router-view> ? </div> </template>
這樣，所有的頁面都有這個Head了
總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
最近遇到一個需求,需要把內(nèi)容下載生成pdf文件,但轉(zhuǎn)換過程中內(nèi)容總是會被截斷,就很難受,從網(wǎng)上找到了解決辦法分享給大家,這篇文章主要給大家介紹了關(guān)于vue生成pdf文件步驟及pdf分頁隔斷處理的相關(guān)資料,需要的朋友可以參考下2024-02-02
這篇文章主要給大家介紹了如何從零開始實現(xiàn)Vue簡單的Toast插件的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2018-12-12
vue源碼學(xué)習(xí)之Object.defineProperty 對數(shù)組監(jiān)聽
這篇文章主要介紹了vue源碼學(xué)習(xí)之Object.defineProperty 對數(shù)組監(jiān)聽，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-05-05
vue是一款漸進(jìn)式JavaScript框架,漸進(jìn)式是指由淺到深,由簡單到復(fù)雜的使用vue框架,下面這篇文章主要給大家分享介紹了幾個可以助你提高效率的Vue指令,需要的朋友可以參考下2022-05-05
基于Vue實現(xiàn)后臺系統(tǒng)權(quán)限控制的示例代碼
本篇文章主要介紹了基于Vue實現(xiàn)后臺系統(tǒng)權(quán)限控制的示例代碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-08-08
這篇文章主要介紹了vue路由分文件拆分管理詳解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
vscode中的vue項目報錯Property ‘xxx‘ does not exist on type ‘Combin
這篇文章主要介紹了vscode中的vue項目報錯Property ‘xxx‘ does not exist on type ‘CombinedVueInstance＜{ readyOnly...Vetur（2339），文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-09-09
vue 解決移動端彈出鍵盤導(dǎo)致頁面fixed布局錯亂的問題
今天小編就為大家分享一篇vue 解決移動端彈出鍵盤導(dǎo)致頁面fixed布局錯亂的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
vue實現(xiàn)離線地圖+leaflet+高德瓦片的詳細(xì)代碼
這篇文章主要給大家介紹了關(guān)于vue實現(xiàn)離線地圖+leaflet+高德瓦片的詳細(xì)代碼,Vue Leaflet是一種結(jié)合了Vue框架和Leaflet庫的前端技術(shù),用于展示和操作天地圖,需要的朋友可以參考下2023-10-10
淺談vue實現(xiàn)數(shù)據(jù)監(jiān)聽的函數(shù) Object.defineProperty
本篇文章主要介紹了淺談vue實現(xiàn)數(shù)據(jù)監(jiān)聽的函數(shù) Object.defineProperty，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-06-06