在VUE.js中隐藏某些页面的侧栏组件
在VUE.js中隐藏某些页面的侧栏组件
提问于 2020-10-14 16:26:41
我正在和Vue.js一起工作，我有一个问题。
有没有办法只隐藏一些页面的sidebar组件？下面是我的代码。
router.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一样
请帮帮忙。
回答 1
Stack Overflow用户
回答已采纳
发布于 2020-10-14 17:23:17
您可以将元信息添加到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}添加到您希望隐藏侧边栏的任何路径中
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/64349375
复制相关文章
相似问题
腾讯云开发者
