Nrthugu

<template>

    <div>

        <top-loader ref="topLoader"></top-loader>

        <div class="container">

            <router-view></router-view>

        </div>

    </div>

</template>



<script>

import Toploader from '../global/Toploader.vue';

    export default {

        components: {

            'top-loader': Toploader,

        },

        mounted () {

            this.$refs.topLoader.start();

            setTimeout(() => {

              this.$refs.topLoader.done();

            }, 2000)

            //works here

        },

        beforeRouteUpdate (to, from, next) {

            this.$refs.topLoader.done();

            console.log(to);//not even this

            next();

        },

        beforeRouteLeave (to, from, next) {

            this.$refs.topLoader.start();

            console.log(to);//not even this

            next();

        }

    };

</script>

This is my single file component that is called in app.js:

require('./scripts/bootstrap');



window.Vue = require('vue');

import SFC from './components/SFC.vue'

import Routes from './routes/routes'

import VueRouter from 'vue-router'





Vue.use(VueRouter);



const router = new VueRouter({routes: Routes, mode: 'history'});



const app = new Vue({

    el: '#root',

    render: h => h(SFC),

    router: router

});

I have 3 routes ('/', '/about', '/contact') inside routes file..
Nothing works with beforeRouteUpdate or Leave, but just if I add watcher for $route it does work...

Like this:

watch: {

    $route(to, from) {

      console.log('after', this.$route.path);

    }

  }

But this fires after route is loaded, I need one before it leaves current route and one after it load next route.

Any help?

It works as expected.

Referring to vue-router documentation about In-Component Navigation Guards:

called before the route that renders this component is confirmed.

Meaning, that when navigation guards are declared inside component, they will be triggered only when render of that component happens. Not nested components, as in code example above, because SFC.vue is never unmounted.

You can achieve desired behavior by:

1. 
   watch-ing route changes from parent component, as in example code you provided. The downside is that it will be triggered on any(!) route change. If navigation occurs inside nested components - it will be triggered. The benefit - this approach has access to component instance (this).


2. With Global Guards declared on router instance. Again, it will be triggered on every route change, so you will have to verify if it is a child route of those you should handle.


3. By declaring a handler function and adding it to each route configuration as in code example. Good thing is that you can reuse handler functions and keep them in a separate module, while importing inside router instance constructor.


4. Move existing handlers into a mixin and using it inside component declaration of each route that should be handled.

After good sleep I found answer:

I made:

window.Event = new class {

    constructor() {

        this.vue = new Vue();

    }



    fire(event, data = null) {

        this.vue.$emit(event, data);

    }



    listen(event,  callback) {

        this.vue.$on(event, callback);

    }

};



const router = new VueRouter({routes: Routes, mode: 'history'});



router.beforeEach((to, from, next) => {

    Event.fire('loader-start', 'start');

    next();

});



router.afterEach((to, from) => {

    setTimeout(function() {

        Event.fire('loader-done', 'done');

    }, 500);

});

And inside component I listen for those events and change the $ref :D