Good afternoon dear, I have the following error, loads the components several times:
The steps have to make so that me of the error are the following:
- Login
- Join message view (load component messages. Vue, which has a console.log for an array)
3 .I close session - Again, login (At that moment to see through the console loads the component messages.vue, which should not be so since I have not entered the messages view)
5.In the same way entry to view messages (all normal, print the array)
6.Session closure. - Login. (At this moment, he has loaded messages twice. I have not entered the messages view).
and so on, if I re-enter messages. The next time I close and log in I load the messages component 3 times.
This happens to me with every view of the project.
The main.js file where vue initializes:
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);
});
},
});
function close session in another component.
> cerrarSesion(){
let vm = this; firebase.auth().signOut(); //Solo me interesa cerrar sesión en firebase vm.$f7router.navigate('/login/'); },
main.vue:
<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 Home from './assets/vue/pages/home.vue';
import AboutPage from './assets/vue/pages/about.vue';
import FormPage from './assets/vue/pages/form.vue';
import DynamicRoutePage from './assets/vue/pages/dynamic-route.vue';
import PanelLeftPage from './assets/vue/pages/panel-left.vue';
import ColorThemes from './assets/vue/pages/color-themes.vue';
import Chat from './assets/vue/pages/chat.vue';
import Vuex from './assets/vue/pages/vuex.vue';
import VistaNectar from './assets/vue/pages/vistanectar.vue';
import Login from './assets/vue/pages/login.vue';
import RegistrarCuenta from './assets/vue/pages/registrarCuenta.vue';
import RecuperarPass from './assets/vue/pages/recuperarpass.vue';
import Trabajos from './assets/vue/pages/trabajos.vue';
import Perfil from './assets/vue/pages/perfil/perfil.vue';
import Politicas from './assets/vue/pages/perfil/politicas.vue';
import Contactenos from './assets/vue/pages/perfil/contactenos.vue';
import PreguntasFrecuentes from './assets/vue/pages/perfil/preguntasfrecuentes.vue';
import Ayuda from './assets/vue/pages/perfil/ayuda.vue';
import ComentarioServido from './assets/vue/pages/perfil/comentarioservido.vue';
import TerminoServicios from './assets/vue/pages/perfil/terminoservicios.vue';
import InfoPersonal from './assets/vue/pages/perfil/infopersonal.vue';
import PagosCobros from './assets/vue/pages/perfil/pagoscobros.vue';
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: '/form/',
component: FormPage
},
{
path: '/dynamic-route/blog/:blogId/post/:postId/',
component: DynamicRoutePage
},
{
path: '/panel-left/',
component: PanelLeftPage
},
{
path: '/color-themes/',
component: ColorThemes
},
{
path: '/chat/',
component: Chat
},
{
path: '/vuex/',
component: Vuex
},
{
path: '/vistanectar/',
component: VistaNectar
},
{
path: '/login/',
component: Login
},
{
path: '/registrarCuenta/',
component: RegistrarCuenta
},
{
path: '/recuperarpass/',
component: RecuperarPass
},
{
path: '/noticias/',
component: Noticias
},
{
path: '/articulo/:id',
component: DetalleNoticia
},
{
path: '/contactenos/',
component: Contactenos
},
{
path: '/politicas/',
component: Politicas
},
{
path: '/FAQ/',
component: PreguntasFrecuentes
},
{
path: '/ayuda/',
component: Ayuda
},
{
path: '/ayudadoc/',
component: AyudaDoc
},
{
path: '/informacion/',
component: Informacion
},
{
path: '/terminoservicios/',
component: TerminoServicios
},
{
path: '/terminopagosuscripcion/',
component: TerminoPagoSuscripcion
},
{
path: '/comentarioservido/',
component: ComentarioServido
},
{
path: '/infopersonal/',
component: InfoPersonal
},
{
path: '/pagoscobros/',
component: PagosCobros
},
{
path: '/docoficial/',
component: DocOficial
},
{
path: '/tipodocumento/',
component: TipoDocumentoOficial
},
{
path: '/fotodoc/',
component: FotoDoc
},
{
path: '/contacemergencia/',
component: ContacEmergencia
},
{
path: '/nocontacemergencia/',
component: NoContacEmergencia
},
{
path: '/metodospagos/',
component: MetodosPagos
},
{
path: '/servido/:id',
component: PerfilPublico
},
{
path: '/conversacion/:id/:idjefe/:idoferta/:idservidor',
component: Conversacion
},
{
path: '/subcategorias/:idcategoria',
component: SubCategoria
},
{
path: '/usuarioscategoria/:categoria',
component: UsuariosCategoria
},
{
path: '/ofertaslicitacion/:licitacion',
component: OfertasLicitaciones
},
{
path: '/detalleoferta/:idoferta',
component: DetalleOferta
},
{
path:'/detallelicitacion/:idlicitacion',
component: DetalleLicitacion
},
{
path:'/enviaroferta/:idlicitacion',
component: EnviarOferta
},
{
path: '/nuevomensaje/:idservidor',
component: PrimerMensaje
},
{
path: '(.*)',
redirect: '/'
}
];
home.vue
>
<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-link tab-link route-tab-id="tab-3" href="/licitar/"> <f7-icon icon="fas fa-cart-plus" size="20px"></f7-icon> <span class="tabbar-label">Licitar</span> </f7-link> <f7-link tab-link route-tab-id="tab-4" href="/mensajes/"> <f7-icon icon="fas fa-comments" size="20px"></f7-icon> <span class="tabbar-label">Mensajes</span> </f7-link> <!--<f7-link tab-link route-tab-id="tab-5" href="/noticias/"> <f7-icon icon="far fa-newspaper" size="20px"></f7-icon> <span class="tabbar-label">Noticias</span> </f7-link>--> <f7-link tab-link route-tab-id="tab-6" href="/perfil/" v-if="logueado"> <f7-icon icon="fas fa-user" size="20px"></f7-icon> <span class="tabbar-label">Perfil</span> </f7-link> <f7-link tab-link route-tab-id="tab-7" href="/entrar/" v-else> <f7-icon icon="fas fa-user" size="20px"></f7-icon> <span class="tabbar-label">Entrar</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-block> <f7-popup class="demo-popup" :opened="popupOpened" @popup:closed="popupOpened = false"> <f7-navbar class="text-color-black bg-color-white" title="SERVIDO"> <f7-nav-right> <f7-link popup-close icon="fas fa-times" icon-color="black" icon-size="30px"></f7-link> </f7-nav-right> </f7-navbar> <div style="height: 80%" class="display-flex justify-content-center align-items-center"> <f7-block> <f7-row no-grap> <f7-col> <f7-link href="/login/" popup-close icon="far fa-handshake" icon-size="85px" icon-color="black"></f7-link> </f7-col> <f7-col> <f7-link href="/login/" popup-close icon="fas fa-business-time" icon-size="85px" icon-color="black"></f7-link> </f7-col> </f7-row> </f7-block> </div> </f7-popup> </f7-block> </f7-page> </template> <script> import firebase from 'firebase'; import {f7View, f7Row, f7Button, f7Col, f7Popup,f7Toolbar, f7Tabs, f7Tab, f7Page, f7Block, f7Navbar, f7NavLeft, f7NavTitle, f7NavTitleLarge, f7NavRight, f7BlockTitle, f7List, f7ListItem, f7Link, f7Searchbar, f7Icon, f7Statusbar } from 'framework7-vue'; import toolbarbottom from 'assets/vue/pages/toolbarBottom.vue'; export default { components: { f7Page, f7Navbar, f7NavLeft, f7NavTitle, f7NavTitleLarge, f7NavRight, f7BlockTitle, f7List, f7ListItem, f7Link, f7Searchbar, f7Icon, f7Block, f7Tabs, f7Tab, f7Toolbar, f7Popup, f7Col, f7Button, f7Row, f7View, toolbarbottom, f7Statusbar }, data(){ return { showMobileMenu: false, popupOpened: false, logueado: '', pagina_principal: '' } }, created(){ let vm = this; console.log("CREATED AT HOME.VUE"); firebase.auth().onAuthStateChanged((usuario) => { if(usuario){ vm.logueado = usuario; } }); }, updated(){ let vm = this; vm.pagina_principal = localStorage.getItem("pagina_principal"); //1 Categorias General, 2 Listado licitaciones }, methods:{ showToastColorGreen: function() { var self = this; self.$f7.toast.show({ icon: '<i class="icon fas fa-lg fa-check"></i>', text: 'Neque porro quisquam est.', position: 'bottom', cssClass: 'toast-round bg-color-green', closeTimeout: 2000 }); }, loguearse(){ this.logueado = firebase.auth().currentUser; this.popupOpened = this.logueado ? false: true; } }, }; </script>
Actually I have no idea where I can have the error, because when using the function destroyed () component messages.vue is executed, which I understand at that time the component was destroyed. Thank you in advance for the time.