How to stop downloading and playing video in SPA app when navigating to another page?

Question

Vue.js

There is an application created using SPA technology using Framework7 + Vue. There is a video on one page. It is necessary that the video download and playback stop when you go to another page.
Poke where to read about it, or give advice in which direction to look.
Thanks in advance.

Answer 1

Something like this?

router.beforeEach((to, from, next) => {
  if (from.matched.some(record => record.meta.hasMultimedia)) {
    stopAllPlayings();
    next();
  } else next();
});

const routes = [
  {
    path: '/funnyCatsVideos',
    component: require('./views/funny-cats-videos.vue'),
    name: 'videos',
    meta: { hasMultimedia: true }
  },

Answer 2

Depends on how the app is navigated. If vuerouter is used, then you can try using hooks: https://router.vuejs.org/en/advanced/navigation-gu...