I have 2 views A and B, that are loaded in the routes "routeA" and "routeB".
In the view A I'm loading a video.
When I click on the button that exists in the view A that executes $router.push({ name: 'routeB'}), it loads the view B, but I can still listen to the video audio, meaning the DOM did not clean whatever was loading on the previous view.
The way I load the routes is like below:
const routeA = () => import('./components/A.vue');
const routeB = () => import('./components/B.vue');
export default [
{
path: '/routeA',
name: 'routeA',
component: routeA,
},
{
path: '/routeB',
name: 'routeB',
component: routeB,
},
];
Code I use to load the video:
let url = window.URL || window.webkitURL;
var vid = document.getElementById("my_video_player");
vm.video.profile_video_src = url.createObjectURL(xhr.response)+'#t=1';
vid.load();
Is it related to the memory leak that is explained here: https://v2.vuejs.org/v2/cookbook/avoiding-memory-leaks.html?
Is there any chance that I can clean the DOM after moving to another view? Or at least ensure that things like videos don't keep loading / playing?
