在VUE.js中隐藏侧边栏组件某些页面

Question

我正在使用 Vue.js，我有一个问题。

有没有办法sidebar只隐藏某些页面的组件？这是我下面的代码。

路由器.js

  const routes = [
  {
    path: '/',
    redirect: '/home',
    component: () => import('@/layout/MainLayout'),
    children: [
      {
        path: 'home',
        name: 'Home',
        component: () => import('Views/Home.vue'),
      }, 
    ],
  },
  {
    path: '/subpage',
    redirect: '/subpage/subpage',
    component: () => import('@/layout/MainLayout'),
    children: [ 
      {
        path: 'subpage',
        name: 'Subpage',
        component: () => import('Views/Subpage/Subpage.vue'),
      }, 
    ],
  }, 
];

MainLayout.vue

<template>
  <div id="content" class="content"> 
    <router-view></router-view> 
    <Sidebar></Sidebar> 
  </div>
</template>

<script>
import Sidebar from '@/components/Sidebar.vue'; 

export default {
  components: {
    Sidebar, 
  },
};
</script>

我需要做另一个布局吗？喜欢MainLayout2.vue

请帮忙。

Answer 1

您可以向 vue 路由添加元信息。将侧边栏键添加到要隐藏的路线

{
path: '/subpage',
redirect: '/subpage/subpage',
component: () => import('@/layout/MainLayout'),
children: [ 
  {
    path: 'subpage',
    name: 'Subpage',
    meta:{sidebar:false}
    component: () => import('Views/Subpage/Subpage.vue'),
  }, 
],
}, 

然后在布局组件中，创建一个计算属性来检查当前路由是否需要隐藏侧边栏

computed:{
    shouldShowSidebar(){
        return this.$route.meta.sidebar!==false;
    }
}

然后使用此计算属性有条件地隐藏特定路线上的侧边栏

<Sidebar v-if="shouldShowSidebar"></Sidebar> 

您可以添加meta:{sidebar:false}到任何您想要隐藏侧边栏的路线