Vue Router - 路由加载后调用函数

Question

我正在做一个项目，我需要在路由完成加载后调用一个函数。但是，当使用“监视”功能时，它仅在路线更改时加载，但会在路线完成加载之前加载。因此，当我尝试运行以页面上的 DOM 元素为目标的脚本时，这些元素尚不存在。 Vue Router 中是否有任何功能可以让我在运行脚本之前等待所有内容呈现？

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

原文由 RJ McLain 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

你应该使用 Vue.nextTick

在您的情况下，这将转化为：

 const app = new Vue({
    el: '#app',
    router,
    watch: {
        $route() {
            this.$nextTick(this.routeLoaded);
         }
    },
    data() {
        return {};
    },
    methods: {
        routeLoaded() {
           //Dom for the current route is loaded
        }
    },
    mounted() {
/* The route will not be ready in the mounted hook if it's component is async
so we use $router.onReady to make sure it is.
it will fire right away if the router was already loaded, so catches all the cases.
Just understand that the watcher will also trigger in the case of an async component on mount
because the $route will change and the function will be called twice in this case,
it can easily be worked around with a local variable if necessary
*/
       this.$router.onReady(() => this.routeLoaded());
    },
    template: `<router-view/>`
})

这将在每次路由更改时调用 routeLoaded 方法（我推断这是你需要的，因为你正在使用 <router-view> 元素），如果你也想最初调用它，我会推荐 mounted钩子（如示例中所示）或观察者的 直接标志

原文由 Tofandel 发布，翻译遵循 CC BY-SA 4.0 许可协议