Vue Router - вызывать функцию после загрузки маршрута - PullRequest
Новая
       16

Vue Router - вызывать функцию после загрузки маршрута

0 голосов
/ 23 сентября 2018

Я работаю над проектом, в котором мне нужно вызвать функцию ПОСЛЕ завершения загрузки маршрута.Тем не менее, при использовании функции 'watch', он загружается только при изменении маршрута, но делает это до того, как маршрут завершил загрузку.Поэтому, когда я пытаюсь запустить скрипт, нацеленный на элементы DOM на странице, эти элементы еще не существуют.Есть ли какая-либо функциональность в Vue Router, которая позволила бы мне подождать, пока все не будет выполнено, перед запуском скрипта? 

const app = new Vue({
    el: '#app',
    router,
    watch: {
        '$route': function (from, to) {
            function SOMEFUNCTION()
         }   
    },
    data: {
        some data
    },
    template: `
      <router-view/>
  `
})

1 Ответ

0 голосов
/ 23 сентября 2018

Вы можете сделать это, подключившись к VueJS lifecycle hooks:

  1. Использовать зацепки жизненного цикла VueJS: Вот краткий обзор основных ловушек жизненного цикла VueJS.Пожалуйста, обратитесь к документации для полного описания.

i.beforeCreate: эта функция будет вызвана до создания компонента

ii.created: эта функция будет вызываться после создания компонента, но учтите, что хотя компонент создан, он еще не был подключен.Таким образом, вы не сможете получить доступ к this компонента.Тем не менее, это хорошее место для установки Network Requests, которая будет обновлять свойства данных.

iii.mounted: эта функция вызывается после визуализации компонента и доступа к элементам здесь.Это то, что вы ищете.

iv.beforeDestroy: эта функция вызывается до уничтожения компонента.Это может быть полезно для остановки любых созданных вами слушателей (setTimeout, setInterval ..).

See the diagram below for the details.

const app = new Vue({
    el: '#app',
    router,
    mounted(){
      this.someFunction()
    },
    data: {
        some data
    },
    template: `
      <router-view/>
  `
})
Использование Vue Router Guards Guards: Vue Router также предоставляет некоторые хуки жизненного цикла, в которые вы можете зацепиться.Однако, как вы увидите ниже, они не соответствуют вашим требованиям:

i.beforeRouteEnter: вызывается до подтверждения маршрута, который отображает этот компонент.oES НЕ имеют доступа к this экземпляру компонента, потому что он еще не был создан при вызове этого сторожа!

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

iii.beforeRouteLeave: вызывается, когда маршрут, по которому выполняется этот компонент, будет удален от.

enter image description here

Ссылки:

VueJSДокументация (LifeCycle): Экземпляр VueJS

Документация Vue Router (Навигационная защита): Навигационная защита

...