solution of application resume problem

[blackss2]

• I am new at nodejs and nativescript, so I am sorry I cannot have much time to contribute.

As you know, if you do not use process kill, resume your application make [View already has parent error].
I guess root of this problem is alive time of application view and vue instance.

[Process Started] -> AppView Dead / VueInstance Dead
[App Started]　　 -> AppView Alive / VueInstance Alive
[App Destroyed]　 -> AppView Dead / VueInstance Alive
[App Started]　　 -> AppView Alive / VueInstance Alive
[App Destroyed]　 -> AppView Dead / VueInstance Alive
[Process Closed]　 -> AppView Dead / VueInstance Dead

When you re-start app, your vue instance is alive inside of application.start({ create(){HERE} });
So self.$el.nativeView will return View that should be dead at destroyed time but alived due to VueInstance reference.

Here is my simple boiler plate patch.
It add main_vm and clear it at application.on(exitEvent).
So your vue instance will replaced with another root vue instance.
NOW YOU CAN USE android.app.Service.extend FOR CREATING BACKGROUND SERVICE
OLD WAY TO CLEAN nativescript-vue - PROCESS KILL, IS KILL SERVICE TOO

Vue$3.$start({
template: `<page>...</page>`
});

// make start for changing main_vm when application destroyed
Vue$3.$start = function(comp) {
	// main_vm is current main activity vue instance
	let main_vm;
	const application = require("tns-core-modules/application");
	// clear old view and destroy closing main_vm
	application.on(application.exitEvent, function (args) {
		main_vm.$destroy();
		main_vm = undefined;
	});

	// make application independent with initial vm
    application.start({
      create() {
		main_vm = new Vue$3(comp);
		let el = main_vm.$start();
        // Call mountComponent in the create callback when the IOS app loop has started
        // https://github.com/rigor789/nativescript-vue/issues/24
        mountComponent(main_vm, el, undefined);

        const page = isPage(main_vm.$el) ? main_vm.$el.nativeView : new ui_page.Page();

        if (!isPage(main_vm.$el)) {
          page.content = main_vm.$el.nativeView;
        }

        return page
      }
    });
}

// remove application.start({create(){}}) from mount for making application.start independent with initial vm
const mount = function(el, hydrating) {
  if (this.__is_root__) {
  } else {
    mountComponent(this, el, hydrating);
  }
};

[blackss2]

This problem is born from [process lifetime and activity lifetime is different].
nativescript-vue's instance lifetime is pretending activity lifetime, but it is sharing process lifetime.
Alive vue instance and router are making [View has already parent problem] and [Corrupted router stack problem].

[seohangyu]

Where should I add this code?

[blackss2]

it is wrote for dev, so it's complex to guide for using.

[WARN : text below this line wrote not English language for easy communication.(about how to use)]

저 내용은 index.js에 들어가야 합니다.
그리고 Vue.$start를 이용해서 아래와 같이 작성하면 됩니다.

Vue.$start({
		data() {
			let obj = {
				//WHAT YOU WANT
			};
			//WHAT YOU WANT
			return obj;
		},
		created() {
			//WHAT YOU WANT
		},
		template: `<router-page></router-page>`
	}, function() {
		let routes =[
			{path: '*', redirect: '/' + page}
			//WHAT YOU WANT
		];
		const router = new VueRouter({
			routes: routes
		});
		router.replace({name: "START_PAGE_NAME"});
		return router;
	});

저는 더 다른 형태로 사용하기 때문에 축약하면 위와 같습니다.
그리고 router가 정상적으로 동작하지 않기 때문에 back 버튼 동작과 page 이동 관련 동작을 덮어써야 합니다.

[seohangyu]

한국인이신가요?

Is it related to the above code and reopen error?

[blackss2]

the code described above is solution for reopen error.

네.
저렇게 하면 매 실행마다 main_vm을 destroy하고 다시 구성하기 때문에
process는 살아있는채로 activity와 연결된 vm을 제거하고, 결과적으로 activity만 제거됩니다.

[seohangyu]

저는 rollup 템플릿을 사용하면서 하고있는데 일단 router는 문제없이 잘 사용하고있습니다. 그리고 저랑 버전이 다른것 같기도 하네요..
위에 vue$3.start~ 이부분은 노드 모듈의 일부분을 찍으신건가요?
저도 저부분을 찾아봤는데 저랑은 좀 차이가 있습니다.
start메인 부분도 좀 많이 다른것 같습니다..

[blackss2]

Vue$3는 app 내 nativescript-vue 안에 있는 index.js에 있는 코드를 대체해야 하는겁니다.

[blackss2]

Vue$3는 app 내 nativescript-vue 안에 있는 index.js에 있는 코드를 대체해야 하는겁니다.