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 favicon設置以及動態(tài)修改favicon的方法
這篇文章主要介紹了vue favicon設置以及動態(tài)修改favicon的方法,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-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-01vue依賴包報錯問題eslint\lib\cli-engine\cli-engine.js:421
這篇文章主要介紹了vue依賴包報錯問題eslint\lib\cli-engine\cli-engine.js:421,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-08-08Element UI 上傳組件實現(xiàn)文件上傳并附帶額外參數(shù)功能
在使用 ElementUI 的上傳組件 el-upload 實現(xiàn)文件上傳功能時,如果單文件上傳是比較簡單的,但是在實際需求中,往往會在上傳文件時伴隨著一些其他參數(shù),怎么操作呢,下面通過示例代碼講解感興趣的朋友一起看看吧2023-08-08