vue項目如何引入公共頭部底部
更新時間：2023年01月13日 14:46:59 作者：久愛@勿忘
這篇文章主要介紹了vue項目如何引入公共頭部底部問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
vue項目引入公共頭部底部
1.在components文件下創(chuàng)建頭部（header.vue）和底部（footer.vue）文件，名字自定義
2.修改router下的index.js
把頭部文件和底部文件在index.js進行注冊
import header from '@/components/header'
底部同理，
3.在app.vue文件中引入注冊
import HerderLogin from "./components/header"
components:{
HerderLogin
}
定義的標簽為herder-login這樣的，注冊是要寫成駝峰式寫法HerderLogin
直接使用header當做注冊標簽，可能注冊的組件會不起作用
vue項目抽離頭部導航欄以及底部
如果不抽離出來，而是在每個頁面里都寫一遍的話，那你如果要改個跳轉地址，或者名字，極其費勁兒。
首先，在src/components下新建一個layout文件夾，新建head.vue，把頭部導航html、css及js剪切過來就可以。
然后，在App.vue中：
引入Head
import ?Head ?from './components/layout/head'
導出
export default {
? name: 'App',
?? ?components: {
?? ??? ?Tabbar,
?? ??? ?TabbarItem,
? ? ?? ?Head
?? ?},
}使用
<template> ? <div id="app"> ? ? ?<Head></Head> ? ? <router-view></router-view> ? </div> </template>
這樣，所有的頁面都有這個Head了
總結
以上為個人經驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了Vue 自定義ColorPicker及使用方法,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-06-06
本文主要介紹了Vue如何設置el-table背景透明樣式，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2022-08-08
vue favicon設置以及動態(tài)修改favicon的方法
這篇文章主要介紹了vue favicon設置以及動態(tài)修改favicon的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-12-12
這篇文章主要介紹了Vue實現(xiàn)雙向綁定的方法，了解vue的雙向數(shù)據綁定原理以及核心代碼模塊，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-12-12
解決vue無法加載文件D:\Program Files\nodejs\node_global\vue.ps1,
這篇文章主要給大家介紹了關于解決vue無法加載文件D:\Program Files\nodejs\node_global\vue.ps1,因為在此系統(tǒng)上禁止運行腳本的相關資料,這個報錯是由于在系統(tǒng)上禁止運行腳本導致的,文中通過圖文介紹的非常詳細,需要的朋友可以參考下2024-01-01
vue依賴包報錯問題eslint\lib\cli-engine\cli-engine.js:421
這篇文章主要介紹了vue依賴包報錯問題eslint\lib\cli-engine\cli-engine.js:421,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-08-08
這篇文章主要介紹了Vue3中toRef與toRefs的區(qū)別，toRefs與toRef功能一致，但可以批量創(chuàng)建多個ref對象，需要注意的是它只會解析對象的第一層屬性，語法直接傳入對象 toRefs，下面更多內容的介紹需要的小伙伴可以參考一下2022-03-03
為了實現(xiàn)全屏滾動效果,我們首先需要使用Vue.js框架搭建項目,這篇文章主要給大家介紹了關于VUE屏幕整體滾動(滑動或滾輪)原生方法的相關資料,需要的朋友可以參考下2024-01-01
眾所周知，vue 的 mixins 是個非常靈活，但又很容易帶來混亂的 API，Mixins 本該是一種強大的重用代碼的手段，但使用之后往往帶來更多的混亂，代碼變得不易維護，本文就詳細介紹Vue Mixin的正確用法,需要的朋友可以參考下2023-06-06
Element UI 上傳組件實現(xiàn)文件上傳并附帶額外參數(shù)功能
在使用 ElementUI 的上傳組件 el-upload 實現(xiàn)文件上傳功能時,如果單文件上傳是比較簡單的,但是在實際需求中,往往會在上傳文件時伴隨著一些其他參數(shù),怎么操作呢,下面通過示例代碼講解感興趣的朋友一起看看吧2023-08-08