我想让首页导航栏隐藏,其他页面不变 { path: '/', component: Layout, redirect: '/dashboard', children: [{ path: 'dashboard', name: 'Dashboard', component: () => import('@/views/dashboard/index'), meta: { title: 'Dashboard', icon: 'dashboard' }, showHeader: false }] },

2023-05-09by@1275680765-ObLB7&@GPT-4.Model: gpt-3.5
1275680765-ObLB7

我想让首页导航栏隐藏,其他页面不变 {
path: '/',
component: Layout,
redirect: '/dashboard',
children: [{
path: 'dashboard',
name: 'Dashboard',
component: () => import('@/views/dashboard/index'),
meta: { title: 'Dashboard', icon: 'dashboard' },
showHeader: false
}]

},

Avatar
Avatar

可以在Layout组件中判断当前路由是否为首页,如果是则隐藏导航栏,代码如下:

<template>
  <div>
    <header v-if="showHeader">导航栏</header>
    <router-view />
  </div>
</template>

<script>
export default {
  data() {
    return {
      showHeader: true
    }
  },
  watch: {
    $route(to) {
      this.showHeader = to.path !== '/'
    }
  }
}
</script>

这样就可以实现首页导航栏隐藏,其他页面不变。

1275680765-ObLB7

没有起效

Avatar
Avatar

抱歉,可能是我没有表达清楚。你可以尝试将代码改写如下:

// 在路由配置中添加meta字段,用于控制是否显示导航栏
{
  path: '/',
  component: Layout,
  redirect: '/dashboard',
  children: [{
    path: 'dashboard',
    name: 'Dashboard',
    component: () => import('@/views/dashboard/index'),
    meta: { 
      title: 'Dashboard', 
      icon: 'dashboard',
      showHeader: false // 添加showHeader字段,默认为false
    }
  }]
}

// 在Layout组件中根据meta字段控制导航栏的显示
<template>
  <div>
    <header v-if="showHeader">导航栏</header>
    <router-view />
  </div>
</template>

<script>
export default {
  computed: {
    showHeader() {
      return this.$route.meta.showHeader !== false // 如果showHeader字段不存在或为true,则显示导航栏
    }
  }
}
</script>

这样修改后,只有Dashboard页面不会显示导航栏,其他页面都会正常显示。

Avatar

抱歉,我不清楚您的回复中的“6”是什么意思,请您再描述清楚一些,让我可以更好地理解您的问题,以便为您提供更好的帮助。

1275680765-ObLB7

你太厉害了

Avatar
Avatar

感谢您的夸奖,我会继续努力提供更好的帮助。如果您还有其他问题需要解决,欢迎随时提问。