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了

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

Vue 自定义ColorPicker及使用方法
这篇文章主要介绍了Vue 自定义ColorPicker及使用方法,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2023-06-06
Vue如何设置el-table背景透明样式
本文主要介绍了Vue如何设置el-table背景透明样式，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2022-08-08
vue favicon设置以及动态修改favicon的方法
这篇文章主要介绍了vue favicon设置以及动态修改favicon的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-12-12
Vue实现双向绑定的方法
这篇文章主要介绍了Vue实现双向绑定的方法，了解vue的双向数据绑定原理以及核心代码模块，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-12-12
$解决vue无法加载文件D:\Program Files\nodejs\node_global\vue.ps1,因为在此系统上禁止运行脚本$
解决vue无法加载文件D:\Program Files\nodejs\node_global\vue.ps1,
这篇文章主要给大家介绍了关于解决vue无法加载文件D:\Program Files\nodejs\node_global\vue.ps1,因为在此系统上禁止运行脚本的相关资料,这个报错是由于在系统上禁止运行脚本导致的,文中通过图文介绍的非常详细,需要的朋友可以参考下
2024-01-01
$vue依赖包报错问题eslint\lib\cli-engine\cli-engine.js:421$
vue依赖包报错问题eslint\lib\cli-engine\cli-engine.js:421
这篇文章主要介绍了vue依赖包报错问题eslint\lib\cli-engine\cli-engine.js:421,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-08-08
Vue3中toRef与toRefs的区别
这篇文章主要介绍了Vue3中toRef与toRefs的区别，toRefs与toRef功能一致，但可以批量创建多个ref对象，需要注意的是它只会解析对象的第一层属性，语法直接传入对象 toRefs，下面更多内容的介绍需要的小伙伴可以参考一下
2022-03-03
VUE屏幕整体滚动(滑动或滚轮)原生方法举例
为了实现全屏滚动效果,我们首先需要使用Vue.js框架搭建项目,这篇文章主要给大家介绍了关于VUE屏幕整体滚动(滑动或滚轮)原生方法的相关资料,需要的朋友可以参考下
2024-01-01
Vue中Mixin的正确用法详解
众所周知，vue 的 mixins 是个非常灵活，但又很容易带来混乱的 API，Mixins 本该是一种强大的重用代码的手段，但使用之后往往带来更多的混乱，代码变得不易维护，本文就详细介绍Vue Mixin的正确用法,需要的朋友可以参考下
2023-06-06
Element UI 上传组件实现文件上传并附带额外参数功能
在使用 ElementUI 的上传组件 el-upload 实现文件上传功能时,如果单文件上传是比较简单的,但是在实际需求中,往往会在上传文件时伴随着一些其他参数,怎么操作呢,下面通过示例代码讲解感兴趣的朋友一起看看吧
2023-08-08