vue項(xiàng)目如何引入公共頭部底部

更新時(shí)間：2023年01月13日 14:46:59 作者：久愛@勿忘

這篇文章主要介紹了vue項(xiàng)目如何引入公共頭部底部問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

vue項(xiàng)目引入公共頭部底部

1.在components文件下創(chuàng)建頭部（header.vue）和底部（footer.vue）文件，名字自定義

2.修改router下的index.js

把頭部文件和底部文件在index.js進(jìn)行注冊(cè)

import header from '@/components/header'

底部同理，

3.在app.vue文件中引入注冊(cè)

import HerderLogin from "./components/header"
components:{
  HerderLogin 
}

定義的標(biāo)簽為herder-login這樣的，注冊(cè)是要寫成駝峰式寫法HerderLogin

直接使用header當(dāng)做注冊(cè)標(biāo)簽，可能注冊(cè)的組件會(huì)不起作用

vue項(xiàng)目抽離頭部導(dǎo)航欄以及底部

如果不抽離出來，而是在每個(gè)頁面里都寫一遍的話，那你如果要改個(gè)跳轉(zhuǎn)地址，或者名字，極其費(fèi)勁兒。

首先，在src/components下新建一個(gè)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>

這樣，所有的頁面都有這個(gè)Head了

總結(jié)

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

Vue 自定義ColorPicker及使用方法
這篇文章主要介紹了Vue 自定義ColorPicker及使用方法,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2023-06-06
Vue如何設(shè)置el-table背景透明樣式
本文主要介紹了Vue如何設(shè)置el-table背景透明樣式，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2022-08-08
vue favicon設(shè)置以及動(dòng)態(tài)修改favicon的方法
這篇文章主要介紹了vue favicon設(shè)置以及動(dòng)態(tài)修改favicon的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2018-12-12
Vue實(shí)現(xiàn)雙向綁定的方法
這篇文章主要介紹了Vue實(shí)現(xiàn)雙向綁定的方法，了解vue的雙向數(shù)據(jù)綁定原理以及核心代碼模塊，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2016-12-12
$解決vue無法加載文件D:\Program Files\nodejs\node_global\vue.ps1,因?yàn)樵诖讼到y(tǒng)上禁止運(yùn)行腳本$
解決vue無法加載文件D:\Program Files\nodejs\node_global\vue.ps1,
這篇文章主要給大家介紹了關(guān)于解決vue無法加載文件D:\Program Files\nodejs\node_global\vue.ps1,因?yàn)樵诖讼到y(tǒng)上禁止運(yùn)行腳本的相關(guān)資料,這個(gè)報(bào)錯(cuò)是由于在系統(tǒng)上禁止運(yùn)行腳本導(dǎo)致的,文中通過圖文介紹的非常詳細(xì),需要的朋友可以參考下
2024-01-01
$vue依賴包報(bào)錯(cuò)問題eslint\lib\cli-engine\cli-engine.js:421$
vue依賴包報(bào)錯(cuò)問題eslint\lib\cli-engine\cli-engine.js:421
這篇文章主要介紹了vue依賴包報(bào)錯(cuò)問題eslint\lib\cli-engine\cli-engine.js:421,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-08-08
Vue3中toRef與toRefs的區(qū)別
這篇文章主要介紹了Vue3中toRef與toRefs的區(qū)別，toRefs與toRef功能一致，但可以批量創(chuàng)建多個(gè)ref對(duì)象，需要注意的是它只會(huì)解析對(duì)象的第一層屬性，語法直接傳入對(duì)象 toRefs，下面更多內(nèi)容的介紹需要的小伙伴可以參考一下
2022-03-03
VUE屏幕整體滾動(dòng)(滑動(dòng)或滾輪)原生方法舉例
為了實(shí)現(xiàn)全屏滾動(dòng)效果,我們首先需要使用Vue.js框架搭建項(xiàng)目,這篇文章主要給大家介紹了關(guān)于VUE屏幕整體滾動(dòng)(滑動(dòng)或滾輪)原生方法的相關(guān)資料,需要的朋友可以參考下
2024-01-01
Vue中Mixin的正確用法詳解
眾所周知，vue 的 mixins 是個(gè)非常靈活，但又很容易帶來混亂的 API，Mixins 本該是一種強(qiáng)大的重用代碼的手段，但使用之后往往帶來更多的混亂，代碼變得不易維護(hù)，本文就詳細(xì)介紹Vue Mixin的正確用法,需要的朋友可以參考下
2023-06-06
Element UI 上傳組件實(shí)現(xiàn)文件上傳并附帶額外參數(shù)功能
在使用 ElementUI 的上傳組件 el-upload 實(shí)現(xiàn)文件上傳功能時(shí),如果單文件上傳是比較簡單的,但是在實(shí)際需求中,往往會(huì)在上傳文件時(shí)伴隨著一些其他參數(shù),怎么操作呢,下面通過示例代碼講解感興趣的朋友一起看看吧
2023-08-08