vue项目如何引入公共头部底部
更新时间：2023年01月13日 14:46:59 作者：久爱@勿忘
这篇文章主要介绍了vue项目如何引入公共头部底部问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
vue项目引入公共头部底部
1.在components文件下创建头部（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了
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
最近遇到一个需求,需要把内容下载生成pdf文件,但转换过程中内容总是会被截断,就很难受,从网上找到了解决办法分享给大家,这篇文章主要给大家介绍了关于vue生成pdf文件步骤及pdf分页隔断处理的相关资料,需要的朋友可以参考下2024-02-02
这篇文章主要给大家介绍了如何从零开始实现Vue简单的Toast插件的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2018-12-12
vue源码学习之Object.defineProperty 对数组监听
这篇文章主要介绍了vue源码学习之Object.defineProperty 对数组监听，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-05-05
vue是一款渐进式JavaScript框架,渐进式是指由浅到深,由简单到复杂的使用vue框架,下面这篇文章主要给大家分享介绍了几个可以助你提高效率的Vue指令,需要的朋友可以参考下2022-05-05
本篇文章主要介绍了基于Vue实现后台系统权限控制的示例代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下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），文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-09-09
今天小编就为大家分享一篇vue 解决移动端弹出键盘导致页面fixed布局错乱的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-11-11
这篇文章主要给大家介绍了关于vue实现离线地图+leaflet+高德瓦片的详细代码,Vue Leaflet是一种结合了Vue框架和Leaflet库的前端技术,用于展示和操作天地图,需要的朋友可以参考下2023-10-10
浅谈vue实现数据监听的函数 Object.defineProperty
本篇文章主要介绍了浅谈vue实现数据监听的函数 Object.defineProperty，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-06-06
最新评论