Vue.js 路由器:在组件准备就绪时运行代码

Vue.js Router: Run code when component is ready

本文关键字：准备就绪 运行 代码 组件 js 路由器 Vue      更新时间：2023-09-26

我正在使用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 路由器时，

这意味着每次你转换到新路由时，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。

相关文章：