vue设置导航栏、顶部栏为公共页面

首先全局引入需要的两个组件

import LeftSide from '@/components/leftSide/index';
import CrmHeader from '@/components/crmHeader/index';
Vue.component('LeftSide',LeftSide);
Vue.component('CrmHeader',CrmHeader);

然后在MainApp.vue中添加如下代码

<!-- 实际运用场景中,登录注册页面我们不希望出现,所以用keep-alive结合$route.meta来实现这个功能 -->
<div v-if="$route.meta.keepAlive">
	<LeftSide></LeftSide>
    <CrmHeader></CrmHeader>
</div>

在router.js,用meta控制显示

{
    
    
    name: 'home',
    path: '/home',
    component: Home,
    meta:{
    
    
      // true: 侧边栏与顶部栏显示 false: 不显示
      keepAlive: true
    }
}

猜你喜欢

转载自blog.csdn.net/FJ101113/article/details/120651651