需求，后台系统有一个公共的头部：
这个在3个页面中写3份头部，肯定是不优雅的。vue提供的组件思想，我们可以将这个公共的头部组件化：src/components/HeaderComponent.vue
<template>
<header>
<img src="../assets/images/logo.png" alt="" />
<h1>智星云</h1>
<ul v-if="showNav">
<li
v-for="(nav, index) in navArr"
:key="index"
:class="index === activeIndex ? 'active' : ''"
@click="toNav(index, nav.path)"
>
{{ nav.name }}
</li>
</ul>
</header>
</template>
<script>
export default {
data() {
return {
navArr: [
{
name: "云市场",
path: "/store",
},
{
name: "控制台",
path: "/console",
},
{
name: "文档",
path: "/docs",
},
],
activeIndex: 0,
};
},
created() {},
methods: {
toNav(index, path) {
this.$router.push({
path: path,
});
},
},
watch: {
$route: {
handler(newRoute) {
let path = newRoute.path;
this.activeIndex = this.navArr.findIndex((arr) => arr.path === path);
},
immediate: true,
},
},
};
</script>
现在有了这个公共的头部组件，接下来是怎么引入的问题了。有以下3种办法：
1.页面中用组件的方式引入
import HeaderComponent from "../../components/HeaderComponent.vue";
export default {
components: { HeaderComponent },
}
这种做法不是不可以，只是在3个页面都这么做，一定不优雅的。
2.嵌套路由的方式引入
{
path: '/store',
component: HeaderComponent,
children: [
{
path: '/store',
component: StoreIndex,
}
]
}
这种相对于第一种，已经比较优雅。
3.动态组件引入
// App.vue
<template>
<div id="app">
<component :is="layout">
<router-view />
</component>
</div>
</template>
<script>
import DefaultLayout from "./views/DefaultLayout.vue";
import Layout from "./views/Layout.vue";
export default {
components: {
DefaultLayout,
Layout,
},
computed: {
layout() {
return this.$route.meta.layout || DefaultLayout;
},
},
};
</script>
//路由
{ path: '/store', component: StoreIndex, meta: { title: '云市场', layout: 'Layout' } },
//Layout.vue
<template>
<div>
<HeaderComponent />
<router-view />
</div>
</template>
<script>
import HeaderComponent from "../components/HeaderComponent.vue";
export default {
components: {
HeaderComponent,
},
};
</script>
<style lang="less">
</style>
//defaultLayout
<template>
<router-view />
</template>
<script>
export default {};
</script>
知乎账号：空格之王。
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。