Open junioreuripedes opened 6 years ago
Ainda com problemas @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); })
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...
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