Question

我正在使用Vue.js及其官方路由器处理单页应用。

我使用路由器加载的每个部分都有一个菜单和一个组件（.vue文件）。在每个组件中，我都有类似的代码：

<template>
    <div> <!-- MY DOM --> </div>
</template>

<script>
    export default {
        data () {},
        methods: {},
        route: {
            activate() {},
        },
        ready: function(){}
    }
</script>

我想在组件完成转换后执行一段代码（init一个jQuery插件）。如果我在ready事件中添加我的代码，它只会在第一次加载组件时触发。如果我在每次运行的route.activate中添加我的代码，这很好，但是DOM尚未加载，因此无法初始化我的jQuery插件。

每次组件完成转换并且其DOM准备好后，如何运行我的代码？

Answer 1

当您使用Vue.js路由器时，这意味着每次转换到新路由时，Vue.js都需要更新DOM。默认情况下，Vue.js异步执行DOM更新。

为了等到Vue.js更新完DOM，你可以使用Vue.nextTick（回调）。在更新DOM之后将调用回调。

在您的情况下，您可以尝试：

route: {
    activate() {
        this.$nextTick(function () {
            // => 'DOM loaded and ready'
        })
    }
}

更多信息：

Answer 2

您可以使用

mounted(){
  // jquery code
}

Answer 3

虽然这可能有点迟了......如果我猜对了，当您在路线之间导航时，有问题的组件会停留在页面上。这样，Vue重用组件，改变其中需要更改的内容，而不是销毁和重新创建它。 Vue为key提供Properly trigger lifecycle hooks of a component属性。通过更改组件key，我们可以指示Vue重新呈现它。有关详细信息，请参阅key in guide;有关代码示例，请参阅key in api。

Vue.js路由器：组件准备好后运行代码

3 个答案: