Buena tarde estimados, tengo el siguiente error, carga varias veces los componentes:
Los pasos ha realizar para que me del error son los siguientes:
- Inicio sesión
- Ingreso a vista mensajes (cargar componente mensajes.vue, el cual tiene un console.log para un array)
- Cierro sesión
- Nuevamente inicio sesión. (En ese momento al ver mediante la consola carga el componente mensajes.vue, lo cual no debería ser así ya que no he ingresado a la vista mensajes)
- De igual forma ingreso a vista mensajes (todo normal, imprime el array)
- Cierro Sesión.
- Inicio sesión. (En este momento ha cargado 2 veces mensajes.vue y no he ingresado a la vista mensajes).
y así sucesivamente, si vuelvo a ingresar a mensajes.vue la siguiente vez que cierre e inicie sesion carga 3 veces el componente mensajes.vue.
Esto me sucede con cada vista del proyecto.
El archivo main.js donde inicializa vue:
> var firebaseConfig = {
apiKey: "asdasd", authDomain: "asdasdada", databaseURL: "asdasda", projectId: "sasdasdasd", storageBucket: "sasdasdm", messagingSenderId: "asdasdad", appId: "1:asdasdad:web:asdadd" }; // Initialize Firebase firebase.initializeApp(firebaseConfig);
// Init Vue App
export default new Vue({
// Root Element
el: '#app',
store,
render: c => c('app'),
components: {
app
},
mounted() {
window.addEventListener('load', () => {
// run after everything is in-place
FastClick.attach(document.body);
});
},
});
función cerrar sesión en otro componente.
cerrarSesion(){
let vm = this;
firebase.auth().signOut(); //Solo me interesa cerrar sesión en firebase
vm.$f7router.navigate('/login/');
},
Acá inicio F7:
<template> <!-- App --> <f7-app :params="f7params"> <f7-view url="/" :main="true" links-view=".view-main" :pushState="true"></f7-view> </f7-app> </template> <script> // Import Routes... import {f7Tabs, f7Tab, f7Link, f7Toolbar, f7App, f7Panel, f7View, f7Statusbar, f7Button, f7Col, f7Page, f7Navbar, f7Block, f7Row } from 'framework7-vue'; import routes from './routes.js'; export default { components: { f7App, f7Panel, f7View, f7Statusbar, f7Button, f7Col, f7Block, f7Page, f7Row, f7Navbar, f7Toolbar, f7Link, f7Tabs, f7Tab }, data() { return { f7params: { id: 'com.terabit.servido', routes, scroll: true, touch: { tapHold: true, materialRipple: true, activeState: true, disableContextMenu: false, } } } } } </script>
route.js:
import Noticias from './assets/vue/pages/noticias.vue';
import DetalleNoticia from './assets/vue/pages/detallenoticia.vue';
import Entrar from './assets/vue/pages/entrar.vue';
import AyudaDoc from './assets/vue/pages/ayudadoc.vue';
import Informacion from './assets/vue/pages/informacion.vue';
import TerminoPagoSuscripcion from './assets/vue/pages/terminopagosuscripcion.vue';
import DocOficial from './assets/vue/pages/docoficial.vue';
import TipoDocumentoOficial from './assets/vue/pages/tipodocumento.vue';
import FotoDoc from './assets/vue/pages/fotodoc.vue';
import ContacEmergencia from './assets/vue/pages/contacemergencia.vue';
import NoContacEmergencia from './assets/vue/pages/nocontacemergencia.vue';
import MetodosPagos from './assets/vue/pages/metodospagos.vue';
import NotFound from './assets/vue/pages/notfound.vue';
import PerfilPublico from './assets/vue/pages/perfilPublico.vue';
import CategoriasGeneral from './assets/vue/pages/categorias/categoriasgeneral.vue';
import SubCategoria from './assets/vue/pages/categorias/subcategorias.vue';
import UsuariosCategoria from './assets/vue/pages/categorias/UsuariosCategorias.vue';
import PrimerMensaje from './assets/vue/pages/categorias/primermensaje.vue';
import Mensajes from './assets/vue/pages/chat/mensajes.vue';
import Conversacion from './assets/vue/pages/chat/conversacion.vue';
import Licitaciones from './assets/vue/pages/licitaciones/licitar.vue';
import OfertasLicitaciones from './assets/vue/pages/licitaciones/ofertaslicitaciones.vue';
import DetalleOferta from './assets/vue/pages/licitaciones/detalleoferta.vue';
import LicitacionesGeneral from './assets/vue/pages/licitaciones/licitacionesgeneral.vue';
import DetalleLicitacion from './assets/vue/pages/licitaciones/detallelicitacion.vue';
import EnviarOferta from './assets/vue/pages/licitaciones/enviaroferta.vue';
export default [
{
path: '/',
component: Home,
tabs: [
{
path: '/',
id: 'tab-1',
component: CategoriasGeneral
},
{
path: '/licitacionesgeneral',
id: 'tab-1-2',
component: LicitacionesGeneral
},
{
path: '/trabajos/',
id: 'tab-2',
component: Trabajos
},
{
path: '/licitar/',
id: 'tab-3',
component: Licitaciones
},
{
path: 'mensajes/',
id: 'tab-4',
component: Mensajes
},
/*{
path: 'noticias/',
id: 'tab-5',
component: Noticias
},*/
{
path: '/perfil/',
id: 'tab-6',
component: Perfil
},
{
path: '/entrar/',
id: 'tab-7',
component: Entrar
},
],
},
{
path: '/about/',
component: AboutPage
}
{
path: '(.*)',
redirect: '/'
}
];
Home.vue
<template>
<f7-page>
<!--<toolbarbottom></toolbarbottom>-->
<f7-statusbar></f7-statusbar>
<f7-toolbar tabbar labels class="toolbar-bottom-md bg-color-cyan-9">
<f7-link tab-link route-tab-id="tab-1" v-if="pagina_principal == '1'" href="/">
<f7-icon icon="fas fa-home" size="20px"></f7-icon>
<span class="tabbar-label">Home</span>
</f7-link>
<f7-link tab-link route-tab-id="tab-1-2" v-else href="/licitacionesgeneral">
<f7-icon icon="fas fa-home" size="20px"></f7-icon>
<span class="tabbar-label">Home</span>
</f7-link>
<f7-link tab-link route-tab-id="tab-2" href="/trabajos/">
<f7-icon icon="fas fa-briefcase" size="20px"></f7-icon>
<span class="tabbar-label">Ofrecer</span>
</f7-link>
</f7-toolbar>
<f7-tabs routable>
<f7-tab id="tab-1"></f7-tab>
<f7-tab id="tab-1-2"></f7-tab>
<f7-tab id="tab-2"></f7-tab>
<f7-tab id="tab-3"></f7-tab>
<f7-tab id="tab-4"></f7-tab>
<!--<f7-tab id="tab-5"></f7-tab>-->
<f7-tab id="tab-6"></f7-tab>
<f7-tab id="tab-7"></f7-tab>
</f7-tabs>
</f7-page>
</template
En realidad no tengo idea donde pueda tener el error, ya que al utilizar la función destroyed() del componente mensajes.vue se ejecuta, lo cual entiendo en ese momento se destruyo el componente.
De antemano muchas gracias por el tiempo.