vue项目如何引入公共头部底部
短信预约 -IT技能 免费直播动态提醒
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项目抽离头部导航栏以及底部
如果不抽离出来，而是在每个页面里都写一遍的话，那你如果要改个跳转地址，或者名字，极其费劲儿。
首先，在class="lazy" data-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了
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持编程网。
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
