vue脚手架中隐藏公共的组件

我们开发vue移动端项目的时候,项目下方会有一个tabbar的导航,这个是个公共的组件 但是我们有的页面并不需要这个

就需要帮公共的组件给隐藏了

可能这个时候有的童鞋会说 我们那个页面不引入这个组件不就行了 

但要知道很多项目的 底部导航栏是在 App.vue 而且都是单页开发的 

具体实现的方法我在下面讲解  

1.首先把 底部导航封装成一个组件   FooterBar组件   在app.vue文件中  路由下面重新创建一个 router-view 标记

起一个名字叫做 footer-bar

<router-view></router-view>

<router-view name="footer-bar"></router-view>

2.然后就是在 路由文件中 那个组件需要那个组件引入就可以了

import FooterBar from "@/component/FooterBar.vue"

const routes = [

  {

    path: '/',

    name: 'home',

    // component: Home  //  不在是一个单个的 componet了 而是 components   默认是你那个 底部导航上面的东西

    components: {

      default: Home,

      'footer-bar': FooterBar

    }

  },

   // 详情页面不需要 就 不写就行了

  {

    path: '/detail/:id', // 传惨

    name: 'detail',

    component: () => import('../views/Detail.vue')

  }

]

这样 就实现了  到了这个问题算是解决了  继续加油努力  前端小白 日常打卡