Tengo una aplicación AngularJS donde estoy usando algunos componentes de Vue (versión 2).

La barra de navegación de la aplicación está en AngularJS.

Cuando cambio entre diferentes opciones de navegación (Inicio/Soporte), estoy cargando los componentes de Vue relacionados.

El proyecto VueJS se crea utilizando npm run buid-lib y se vincula en la aplicación angularJS (enlace npm ). El nombre de la biblioteca es myVueApp .

Uso de la biblioteca ngVue para integrar Vue con AngularJS.

Código para cargar Vue Components en la aplicación AngularJS (como complemento):

 (function() { 'use strict'; if (typeof myVueApp !== 'undefined') { var VueContainer = myVueApp.components.VueContainer, plugins = myVueApp.plugins; } angular .module('my.vue.config', ['ngVue', 'ngVue.plugins']) .config(function($ngVueProvider) { $ngVueProvider.setRootVueInstanceProps(plugins); }) // Add Vue components here .value('VueContainer', VueContainer); })();

En la página HTML, estoy cargando el componente como el siguiente ejemplo:

Inicio.Html (en AngularJS)

 <div> <vue-component name="VueContainer"></vue-component> </div>

Enrutamiento de los componentes de Vue en el controlador angular:

 var ngModule = angular.module('home.content', ['ui.router']); ngModule.config(function ($stateProvider) { $stateProvider .state('home.content', { url: '?home&t', controller: 'HomeCtrl as HomeCtrl ', templateUrl: '/views/home.html', resolve: { }, onEnter: function(){ } });

Cuando cambio entre los componentes de Vue, se llama al evento Creado/Montado de cada componente de Vue (llamado y llamado).

Ejemplo de componentes de Vue:

InicioComponente.Vue

 async created() { //This is called every time it is switched to other component await this.getHomeData(); this.loading = false; }

SupportComponent.Vue

 created() { //This is called every time it is switched to other component this.$store.dispatch('getAllSupportProp'); this.loadDetails(); }

En la aplicación angular, cuando cambio de HomeComponent.Vue a SupportComponent.Vue o viceversa, se llama a los eventos creados/montados de ambos componentes, mientras que solo debería llamar al evento creado del componente de destino.

Cuando ejecuto la aplicación Vue sola (no con AngularJS), el cambio entre componentes no tiene este problema (no se llama al componente Callee).