vue项目如何引入公共头部底部

2023-01-13 14:43:07 作者：久爱@勿忘

这篇文章主要介绍了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当做注册标签，可能注册的组件会不起作用

如果不抽离出来，而是在每个页面里都写一遍的话，那你如果要改个跳转地址，或者名字，极其费劲儿。

首先，在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了

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