vue.js - vue如何隐藏侧边栏

Question

伙计们，我是 Vue 的新手，并使用 coreui 管理面板来开发一些字体 vue 但现在我陷入了这个问题，这是 nav.js 文件

   export default { 
          items: [
                   {
                   name: 'Product',
                   url: '/product',
                   icon: 'fa fa-cart-arrow-down',
                         children: [
                                      {
                                       name: 'Addproduct',
                                       url: '/product/Addproduct',
                                     },
                                       {
                                        name: 'Listproduct',
                                        url: '/product/Listproduct',
                                     }
                             ]
                    },

             ]
     }

主容器

            <template>
                  <div class="app">     
                            <div class="app-body">
                               <Sidebar :navItems="nav"/>
                                    <main class="main">
                                           <div class="container-fluid">
                                              <router-view></router-view>
                                          </div>
                                    </main>
                             <AppAside/>
                        </div>
              </div>
       </template>

      <script>
             import nav from '../_nav'
             export default {
             name: 'full',
            components: {
                    Sidebar,

                          },
          data () {
                  return {
                nav: nav.items
            }
         },
        computed: {
            name () {
            return this.$route.name
        },
           list () {
            return this.$route.matched
                    }
                }
         }
    </script>

这是我的侧边栏

                <template v-for="(item, index) in navItems">
                        <template v-if="item.title">
                                <SidebarNavTitle :name="item.name" :classes="item.class" :wrapper="item.wrapper"/>
                      </template>


                      <template v-else>
                          <template v-if="item.children">
                     </template>
                <template v-else>
                      <SidebarNavItem :classes="item.class">
                         <SidebarNavLink :name="item.name" :url="item.url" :icon="item.icon" :badge="item.badge" :variant="item.variant"/>
                   </SidebarNavItem>
               </template>
           </template>
    </template>

我现在在我的浏览器本地存储中搜索 addproduct，如果当用户登录并转到仪表板时，我会观察浏览器应用程序中是否存在哪个 url 名称，如果存在则显示，否则现在忽略我的问题是我如何应用像 addproduct 这样的条件=addprodcut this this visible else hide

Answer 1

你可以在挂载的钩子中有一个方法，它可以从本地存储中获取数据并检查它是否存在于 url 中。然后将其分配给切换侧边栏的主组件中的变量。像下面这样的东西应该可以工作：

<template>
              <div class="app">     
                        <div class="app-body">
                           <Sidebar :navItems="nav" v-if="showSidebar" />
                                <main class="main">
                                       <div class="container-fluid">
                                          <router-view></router-view>
                                      </div>
                                </main>
                         <AppAside/>
                    </div>
          </div>
   </template>

  <script>
         import nav from '../_nav'
         export default {
         name: 'full',
        components: {
                Sidebar,

                      },
      data () {
              return {
            nav: nav.items,
            showSidebar: false
        }
     },
    mounted () {
        this.checkSidebarVisibility()
    },
    methods: {
        checkSidebarVisibility: function() {
                    const inLocal = window.localStorage.getItems('your_item');
                   const inUrl = window.location.toString();
                   // check if inurl inside inLocal
                   if (inUrl is in inLocal) {
                     this.showSidebar = true;
                   } else {
                     this.showSidebar = false; 
                   }
                 } 
    },
    computed: {
        name () {
        return this.$route.name
    },
       list () {
        return this.$route.matched
                }
            }
     }
</script>