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

【问题标题】：Vue.js Router: Run code when component is readyVue.js 路由器：组件准备好时运行代码
【发布时间】：2016-11-16 17:26:47
【问题描述】：

我正在使用 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 准备就绪时，我如何运行我的代码？

【问题讨论】：

标签： javascript vue.js vue-router

【解决方案1】：

你可以使用

mounted(){
  // jquery code
}

【讨论】：

【解决方案2】：

虽然这可能有点晚了...如果我猜对了，当您在路线之间导航时，有问题的组件会留在页面上。这样，Vue 会重用组件，更改其中需要更改的内容，而不是销毁并重新创建它。 Vue 为Properly trigger lifecycle hooks of a component 提供了一个key 属性。通过更改组件的key，我们可以指示 Vue 重新渲染它。详情见key in guide，代码示例见key in api。

【讨论】：

【解决方案3】：

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

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

你的情况，你可以试试：

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

更多信息：

【讨论】：

问题是 ready 方法只在第一次加载组件时运行，但是如果我去另一条路线，然后我回到这条路线，ready 方法不会运行。每次调用路由时我都需要它运行。
我正在尝试访问一个元素 $('.test')，它存在于 nextTick 回调的组件 dom 中，但我无法获取它。不过它可以与 setTimeout 一起使用，所以似乎 dom 尚未加载