This article implements a three-stage interface
public layout file
First create a new layoutPc folder under src, and then create three new components header, bottm, and main files for layoutPc to basically determine the basic shelf of a page, and then create a new index.vue file comment/
AppMain.vue
<template>
<section class="app-main">
<transition name="fade-transform" mode="out-in">
<keep-alive >
<router-view v-if="!$route.meta.link" :key="key" />
</keep-alive>
</transition>
<iframe-toggle />
</section>
</template>
<script>
export default {
name: 'AppMain',
components: {
},
computed: {
key() {
return this.$route.path
}
}
}
</script>
bootom/index.vue
<template>
<div class="bottom-wrapper">
<el-row>
<el-col :span="8">
<div>
友情链接
</div>
</el-col>
<el-col :span="8">
<p>© {
{
new Date().getFullYear() }} </p>
<div>
<div class="web-title">
<svg-icon icon-class="web" size="1.1875rem"></svg-icon>
网站资讯
</div>
</div>
</el-col>
<el-col :span="8">
<div>
广告位招租
</div>
</el-col>
</el-row>
</div>
</template>
<script>
export default {
name: "bottom",
data() {
return {
}
},
computed:{
},
mounted() {
},
methods:{
}
};
</script>
header/index.vue
<template>
<div class="header-wrapper show up">
headers
</div>
</template>
<script>
export default {
name: "headers",
data() {
return {
}
},
components: {
},
};
</script>
layoutPc/index.vue
introduces three components
<template>
<div >
<Header/>
<app-main/>
<Bottom/>
</div>
</template>
<script setup>
import Header from "@/layoutPc/header/index";
import Bottom from "@/layoutPc/bottom/index";
import AppMain from "@/layoutPc/comment/AppMain";
export default {
name: "layoutPc",
components: {
Header,
Bottom,
AppMain
},
}
</script>
router/index.js
routing configuration
import Layout from '@/layoutPC/index'
export const constantRoutes = [
{
path: '/',
component: Layout,
children: [
{
path: '/index',
component: () => import('@/views/index.vue')
},
]
},
]
Effect
