我们开发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')
}
]
这样 就实现了 到了这个问题算是解决了 继续加油努力 前端小白 日常打卡