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

目录vue项目引入公共头部底部vue项目抽离头部导航栏以及底部总结vue项目引入公共头部底部1.在components文件下创建头部（header.vue）和底部（footer.vue）文件，名字自定...

vue项目引入公共头部底部

1.在components文件下创建头部（header.vue）和底部（footer.vue）文件，名字自定义

2.修改router下的index.js

把头部文件和底部文件在index.js进行注册

import header from '@/components/header'

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

底部同理，

3.在app.vue文件中引入注册

import HerderLogin from "./components/header"
components:{
  HerderLogin 
}

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

定义的标签为herder-login这样的，注册是要写成驼峰式写php法HerderLogin

直接使用header当做注册标签，可能注册的组件会不起作用

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

首先，在src/components下新建一个layout文件夹，新建head.vue，把头部导航html、css及js剪切过来就可以。

然后，在App.vue中php：

引入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了

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