vue项目 部分页面需要引入公共头部和尾部 其他页面不需要

Question

我在App.vue里面引入头部和尾部组件 使得项目所有页面都有头部尾部 但是我目前只需要部分页面引入

Answer 1

这个简单，比较好的办法是使用router-view子路由实现。使用v-if控制、把页头页尾插到每个需要的页面上等方法也可以实现，但是不太好，不推荐。下面具体说：
把你需要头部尾部的所有页面放到一个路由的子路由里面，比如有AB两个组件分别表示一个页面，A页面显示页头页尾同时插入子路由(组件为a.vue、b.vue)，那A.vue可以如下写：

<template>
    <div>
        <header/>
        <router-view></router-view>
        <footer/>
    </div>
</template>

路由可以配置为:

[
    {
        path: '/pageA',
        component: () => import('@/components/A.vue'),
        children: [
            {
                path: '/',
                redirect: '/pageA/a'
            },
            {
                path: '/a',
                component: () => import('@/components/a.vue')
            },
            {
                path: '/b',
                component: () => import('@/components/b.vue')
            }
        ]
    },
    {
        path: '/pageB',
        component: () => import('@/components/B.vue')
    }
]

这样A页面下的所有子路由页面都会有头部尾部了，而且只会创建一个头尾。

Answer 2

楼主，那就根据你的路由来判断加载就可以了。
简单思路，定义一个数组，这里是需要引入头部和尾部组件的路由 path。然后在 App.vue 文件里，在监听路由变化的时候去做匹配即可。

Answer 3

了解下子路由

Answer 4

使用vuex控制组件显隐 贴一个链接https://blog.csdn.net/zgh0711...