How to import common header and footer in Vue
Generally speaking, the head section and foot section of pages from the same website are basically the same, so when we develop a website, we often extract these two parts of code separately as a common module. Today let’s take a look at how to implement this structure in Vue.
Suppose we now have two files: header.vue and footer.vue, let’s see how to reference them
First Method: Global reference
Here is main.js
import Vue from 'vue'
import App from './App.vue'
import header from './components/Header'
import footer from './components/Footer'
Vue.component('myHeader', header)
Vue.component('myFooter', footer)
new Vue({
router,
render: h => h(App)
}).$mount('#app')
This is the way of reference
<template>
<div id="app" class="top_container">
<my-header></my-header>
<router-view></router-view>
<my-footer></my-footer>
</div>
</template>
<script>
export default {
name: 'app'
}
</script>
<style lang="css" scoped>
</style>
First Method: Local reference
<template>
<div id="app" class="top_container">
<my-header></my-header>
<router-view></router-view>
<my-footer></my-footer>
</div>
</template>
<script>
import header from './components/Header'
import footer from './components/Footer'
export default {
name: 'app',
components: {
'myHeader': header,
'myFooter': footer
}
}
</script>
<style lang="css" scoped>
</style>
Either way, please use as needed.
