Vue Single page app Router,当我们改变路由时组件会发生什么?
Vue Single page app Router, what happens with the components when we change route?
假设我有一个名为 FirstPage 的组件,这是我的默认路由,现在 FirstPage 在 vuex 存储的操作的帮助下触发异步调用,每分钟向后端发送一次 Api(当组件作为路由加载时触发),现在假设我转到一个关于组件的关于路由,FirstPage 是否仍在进行调用?
编辑:
我还没有用它开发应用程序,所以我无法提供示例。
我有兴趣了解路由器在这些情况下的行为,因为每当我更改路由时,我都想停止进行持续调用(因为它们不是必需的)。
原因是,根据这个,我必须为我想到的项目切换工具。
如果组件在页面中呈现,则为相应组件编写的任何脚本仅 运行s。一旦您转到关于替换先前组件的组件,那么先前的脚本将不会 运行.
您可以创建一个带有路由器视图的父组件,并在您始终希望加载的页面中加载,因此您的 FirstPage 组件,但该组件背后应该只有逻辑,而不是 html因为否则你总是会看到渲染的。 Router-view 页面要显示真实的html之类的东西。我希望你明白了,如果没有,我可以为你举个例子。祝你好运。
通常,当您离开组件实例时,组件实例将被销毁。但是,这有两个例外..
1) 当你使用带参数的路由时。来自 Vue Router docs
One thing to note when using routes with params is that when the user navigates from /user/foo
to /user/bar
, the same component instance will be reused. Since both routes render the same component, this is more efficient than destroying the old instance and then creating a new one. However, this also means that the lifecycle hooks of the component will not be called.
2) 当您将 router-view
组件包装在 keep-alive
元素中时。自 the <router-view> is essentially a dynamic component.
通常情况下,Vue 在组件实例被销毁后可以很好地进行管理和清理工作。但有时你必须做一些 manual cleanup, especially if you use some kind of external library. This is usually handled in the beforeDestroy
hook of an instance's lifecycle.
在正常情况下,在所述组件内创建时完成的任何 logic/scripts/etc 都将在 on destroy/close 挂钩上被“清除”(不仅与 vue 有关,而且在许多其他工具中也可以看到),如果需要坚持某些东西,那么它应该在更高的范围内(或其他解决方案)
假设我有一个名为 FirstPage 的组件,这是我的默认路由,现在 FirstPage 在 vuex 存储的操作的帮助下触发异步调用,每分钟向后端发送一次 Api(当组件作为路由加载时触发),现在假设我转到一个关于组件的关于路由,FirstPage 是否仍在进行调用?
编辑:
我还没有用它开发应用程序,所以我无法提供示例。
我有兴趣了解路由器在这些情况下的行为,因为每当我更改路由时,我都想停止进行持续调用(因为它们不是必需的)。
原因是,根据这个,我必须为我想到的项目切换工具。
如果组件在页面中呈现,则为相应组件编写的任何脚本仅 运行s。一旦您转到关于替换先前组件的组件,那么先前的脚本将不会 运行.
您可以创建一个带有路由器视图的父组件,并在您始终希望加载的页面中加载,因此您的 FirstPage 组件,但该组件背后应该只有逻辑,而不是 html因为否则你总是会看到渲染的。 Router-view 页面要显示真实的html之类的东西。我希望你明白了,如果没有,我可以为你举个例子。祝你好运。
通常,当您离开组件实例时,组件实例将被销毁。但是,这有两个例外..
1) 当你使用带参数的路由时。来自 Vue Router docs
One thing to note when using routes with params is that when the user navigates from
/user/foo
to/user/bar
, the same component instance will be reused. Since both routes render the same component, this is more efficient than destroying the old instance and then creating a new one. However, this also means that the lifecycle hooks of the component will not be called.
2) 当您将 router-view
组件包装在 keep-alive
元素中时。自 the <router-view> is essentially a dynamic component.
通常情况下,Vue 在组件实例被销毁后可以很好地进行管理和清理工作。但有时你必须做一些 manual cleanup, especially if you use some kind of external library. This is usually handled in the beforeDestroy
hook of an instance's lifecycle.
在正常情况下,在所述组件内创建时完成的任何 logic/scripts/etc 都将在 on destroy/close 挂钩上被“清除”(不仅与 vue 有关,而且在许多其他工具中也可以看到),如果需要坚持某些东西,那么它应该在更高的范围内(或其他解决方案)