3

我正在使用 Vue.js 及其官方路由器开发一个单页应用程序。

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

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

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

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

每次组件完成过渡并且其 DOM 准备就绪时，我如何运行我的代码？

4

3 回答 3

2

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

为了等到 Vue.js 完成更新 DOM，您可以使用 Vue.nextTick(callback)。DOM 更新后将调用回调。

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

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

了解更多信息：

于 2016-07-14T02:29:35.547 回答
1

您可以使用

mounted(){
  // jquery code
}
于 2018-05-01T07:43:23.033 回答
0

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

于 2016-10-24T06:37:31.320 回答