SPA com Admin LTE

[junioreuripedes]

Fala galera, blz?

Estou com um problema utilizando o tema Admin LTE. Quando utilizo o menu Side Bar de navegação e direciono para uma outra rota o mesmo para de funcionar. Segue link do video que gravei para melhor visualização.

Após acessar qualquer link do menu side bar o mesmo trava e parece que não carrega mais o jquery ou outra coisa voltando ao normal somente após atualizar a pagina (CTRL + F5).

Link: http://www.esysconsultoria.com.br/bug_adminlte.mov

[wilcorrea]

Ainda com problemas @junioreuripedes ?

[junioreuripedes]

Ainda estou.

Resolvi uma parte utilizando afterEach mas observei que não eh somente o tree que esta com pala e sim varias chamadas que faço no índex.html de css e javascript que quando começo a navegar pelas rotas o eles se perdem.

Do tree resolvi paliativo assim, mas preciso achar uma forma de recarregar tudo que esta no índex.html apos ir para outra rota:

router.afterEach((to, from) => { setTimeout(() => { const element = $('[data-widget="tree"]'); $.fn.tree.call(element); $.fn.boxWidget.call($('.box')); },700); })

[FelipePTO]

Ainda está com problema? Eu estou usando o AdminLTE e transformando os componentes dele em componentes do Vue.

<template>
  <div>
    <sidebar></sidebar>
    <toolbar></toolbar>
    <div class="content-wrapper" style="min-height: 916px;">
    <router-view/>
    </div>
  </div>
</template>

o meu App.vue fica assim

dentro do componente

ficou assim

<template>
    <aside class="main-sidebar">
    <!-- sidebar: style can be found in sidebar.less -->
    <section class="sidebar" style="height: auto;">

      <!-- sidebar menu: : style can be found in sidebar.less -->
      <ul class="sidebar-menu tree" data-widget="tree">
        <li class="header">Menu Principal</li>
        <template v-for="(parent, index) in links">
          <li class="treeview active">
            <a href="#">
              <i class="fa fa-dashboard"></i>
              <span>{{index}}</span>
              <span class="pull-right-container">
                <i class="fa fa-angle-left pull-right"></i>
              </span>
            </a>
            <ul class="treeview-menu" >
              <template v-for="child in parent.routes">
                <li>
                  <router-link :to="child.route">
                      <i :class="child.faIcon"></i>{{child.name}}</router-link>
                </li>
              </template>
            </ul>
          </li>
        </template>
      </ul>
    </section>
    <!-- /.sidebar -->
  </aside>
</template>

<script type="text/javascript">
import opcoesmenu from '../components/sidebar/opcoesmenu.vue'
export default{
  name: 'app',
  data(){
    return{
      photo: '/img/quasar-logo.png',
      userId: '12313',
      name: 'Felipe Paulo',
      email: 'FelipePaulo@gmail.com',
      user: {},
      links: {
            Inicial: {
                    routes: [
                        { route: '/', faIcon: 'fa fa-home', materialIcon: 'home', name: 'Inicial' }
                    ],
                    show: true
                },
      }
    }
  },
  components: {
    opcoesmenu
  }
}
</script>

O sidebar é populado chamando este componente opcoesmenu e ele ficou assim:

<template>
  <div>
    <li class="treeview" v-for="(parent, index) in links">
        <a href="#">
          <i class="fa fa-dashboard"></i> <span>{{index}}</span>
          <span class="pull-right-container">
            <i class="fa fa-angle-left pull-right"> 4 </i>
          </span>
        </a>
          <ul class="treeview-menu" v-for="child in parent.routes">
            <router-link :to="child.route" exact tag="div" class="item item-link drawer-closer cursor-pointer" >
              <li><i :class="child.faIcon"></i>{{child.name}}</li>
            </router-link>
          </ul>
    </li>
  </div>
</template>

<script type="text/javascript">

export default {
  props: ['links'],
  mounted: {
    links:this.links
  }
}
</script>

Dessa forma pra popular o menu basta preencher o objeto com o nome e a rota, o bom disso é poder usar um rest pra poder popular isso, fazer controle de permissão e etc...