【问题标题】:Vue Single page app Router, what happens with the components when we change route?Vue单页应用路由器,当我们改变路由时,组件会发生什么?
【发布时间】:2019-03-17 10:05:07
【问题描述】:

假设我有一个名为 FirstPage 的组件,这是我的默认路由,现在 FirstPage 触发一个异步调用,借助 vuex 存储的一个动作,每分钟向后端 Api 进行一次调用(它是在组件作为路由加载),现在假设我转到了转到 About 组件的 about 路由,FirstPage 是否仍在进行调用?

编辑:
我还没有用它开发应用程序,所以我无法提供示例。
了解路由器在这些情况下的行为符合我的兴趣,因为每当我更改路由时,我都希望停止进行持续调用(因为它们不是必需的)。
原因是,根据这一点,我必须为我想到的项目切换工具。

【问题讨论】:

    标签: vue.js vuex vue-router


    【解决方案1】:

    仅当组件在页面中呈现时,为相应组件编写的任何脚本才会运行。一旦您转到关于替换先前组件的组件,则先前的脚本将不会运行。

    【讨论】:

      【解决方案2】:

      你可以创建一个带有路由视图的父组件,并在你的页面中加载你总是想要加载的,所以你的 FirstPage 组件,但是这个组件应该只有它背后的逻辑,而不是 html,否则你总是会看到呈现。路由器查看您想要显示真实 html 和内容的页面。我希望你明白这个想法,如果没有,我可以为你做一个例子。祝你好运。

      【讨论】:

        【解决方案3】:

        通常,当您离开组件时,组件的实例将被销毁。但是,这有两个例外..

        1) 当你使用带参数的路由时。来自Vue Router docs

        在使用带参数的路由时需要注意的一点是,当用户从/user/foo 导航到/user/bar 时,会重复使用相同的组件实例。由于两条路由都渲染相同的组件,因此这比销毁旧实例然后创建新实例更有效。但是,这也意味着组件的生命周期钩子不会被调用。

        2) 当您将 router-view 组件包装在 keep-alive 元素中时。因为the <router-view>本质上是dynamic component

        一般来说,当组件实例被销毁时,Vue 会很好地进行内部管理和清理工作。但有时你必须做一些manual cleanup,特别是如果你使用某种外部库。这通常在instance's lifecyclebeforeDestroy 挂钩中处理。

        【讨论】:

          【解决方案4】:

          在正常情况下,在所述组件内部创建时完成的任何逻辑/脚本/等都将在 on destroy/close 钩子上“清除”(不仅与 vue 有关,而且在许多其他工具中都可以看到),如果有需要坚持一些东西,那么它应该在更高的范围内(或其他解决方案)

          【讨论】:

            猜你喜欢
            • 2018-10-31
            • 2020-11-24
            • 1970-01-01
            • 1970-01-01
            • 2019-11-13
            • 2021-07-18
            • 2021-05-06
            • 1970-01-01
            • 2021-12-05
            相关资源
            最近更新 更多