我正在使用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 准备就绪时运行我的代码?
这意味着每次你转换到新路由时,Vue.js都需要更新 DOM。默认情况下,Vue.js 异步执行 DOM 更新。
为了等到 Vue.js 完成 DOM 的更新,你可以使用 Vue.nextTick(callback)。回调将在 DOM 更新后调用。
在您的情况下,您可以尝试:
route: {
activate() {
this.$nextTick(function () {
// => 'DOM loaded and ready'
})
}
}
欲了解更多信息:
- https://vuejs.org/api/#Vue-nextTick
- https://vuejs.org/guide/reactivity.html#Async-Update-Queue
mounted(){
// jquery code
}
虽然这可能有点晚了...如果我猜对了,当您在路由之间导航时,有问题的组件会保留在页面上。通过这种方式,Vue 重用组件,更改其中需要更改的内容,而不是销毁和重新创建它。Vue 为 Properly trigger lifecycle hooks of a component
提供了一个key
属性。通过更改组件的key
,我们可以指示 Vue 重新渲染它。有关详细信息,请参阅键入指南,有关代码示例,请参阅键入 api。