Как скрыть боковую панель в 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 это это видимо еще скрыть

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>