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

目录

• vue设置导航栏 顶部栏为公共页面
• vue实现顶部导航栏设计
• 效果图
• 总结

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

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

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

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

在router.js，用meta控制显示

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

vue实现顶部导航栏设计

效果图

完整代码：

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。