vue布局中怎么引用参数_vue 在移动端怎么使用公共布局

在移动端一般都是 navbar + main + tabbar 这种布局，怎么把navbar 和 tabbar 实现公用

目前我的做法是直接在 App.vue 里面使用 navbar 和 tabbar 组件，然后通过路由的 meta 信息来控制显示隐藏

export default {

computed: {

navbarVisible() {

const { meta } = this.$route

return meta && meta.navbarVisible

},

tabbarVisible() {

const { meta } = this.$route

return meta && meta.tabbarVisible

}

}

}

路由配置：

const routes = [

{

path: '/home',

component: () => import('@/views/home'),

meta: {

navbarVisible: true,

tabbarVisible: true

}

}

]

其他的方法

1、封装一个 layout 组件，通过插槽嵌入 main 内容区域，然后navbar 和 tabbar 通过 props 来控制，layout.vue 大概如下

export default {

props: {

navbarVisible: {

type: Boolean,

default: true

},

tabbarVisible: {

type: Boolean,

default: true

}

}

}

使用 layout 组件：

这里是内容

2、通过嵌套路由，layout 组件

路由配置：

import Layout from '@/layouts/layout'

const routes = [

{

path: '/home',

component: Layout,

children: [

path: '',

component: () => import('@/views/home')

]

}

]

这样通过嵌套路由用不同的布局组件，也可以实现

大家都是用的哪种啊，还是说有更好的方式