BeforeRouteUpdate или Leave не реагирует в одном компоненте файла - PullRequest
Новая
       19

BeforeRouteUpdate или Leave не реагирует в одном компоненте файла

0 голосов
/ 11 ноября 2018 
<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>

Это мой единственный файловый компонент, который вызывается в 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
});

У меня есть 3 маршрута ('/', '/ about', '/ contact') внутри файла маршрутов .. Ничто не работает с beforeRouteUpdate или Leave, но если я добавлю watcher для $ route, это сработает ...

Как это: 

watch: {
    $route(to, from) {
      console.log('after', this.$route.path);
    }
  }

Но это срабатывает после загрузки маршрута, мне нужен один, прежде чем он покинет текущий маршрут, и один после того, как он загрузит следующий маршрут.

Любая помощь?

Ответы [ 2 ]

0 голосов
/ 11 ноября 2018

После хорошего сна я нашел ответ:

Я сделал: 

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);
});

А внутри компонента я слушаю эти события и изменяю $ ref: D

0 голосов
/ 11 ноября 2018

Работает как положено.

Ссылаясь на vue-router документацию о Встроенные средства навигации :

вызывается до подтверждения маршрута, который отображает этот компонент.

Это означает, что когда навигационные элементы объявлены внутри компонента, они будут срабатывать только тогда, когда произойдет рендеринг этого компонента. Не вложенные компоненты, как в примере кода выше, поскольку SFC.vue никогда не отключается.

Вы можете достичь желаемого поведения:

  1. watch -ing маршрут меняется от родительского компонента, как в приведенном вами примере кода. Недостатком является то, что он будет срабатывать при любом (!) Изменении маршрута. Если навигация происходит внутри вложенных компонентов - она ​​сработает. Преимущество - у этого подхода есть доступ к экземпляру компонента (this).
  2. С Global Guards , объявленными на экземпляре маршрутизатора. Опять же, он будет срабатывать при каждом изменении маршрута, поэтому вам нужно будет проверить, является ли это дочерним маршрутом тех маршрутов, которые вы должны обработать.
  3. Объявляя функцию-обработчик и добавляя ее к каждой конфигурации маршрута, как в примере кода . Хорошо, что вы можете повторно использовать функции-обработчики и хранить их в отдельном модуле, импортируя их в конструктор экземпляра маршрутизатора.
  4. Переместите существующие обработчики в mixin и используйте его внутри объявления компонентов каждого маршрута, который должен быть обработан.
...