Question

所以我的应用程序中有一个加载器屏幕，其想法是在beforeCreate钩子上显示加载器屏幕，以使用户看不到正在渲染的内容，然后在已安装的钩子上删除加载器屏幕。 / p>

当您有两个或三个视图/组件时，这很有趣，而且很好，但是目前我的应用程序具有更多功能，并且将其添加到每个组件/视图中对我来说意义不大。

所以我想知道，是否有任何方法可以向beforeCreate和在全局范围内挂接的钩子中添加一些东西。像这样：

main.js

Vue.beforeCreate(() => {
    //Show the loader screen
});

Vue.mounted(() => {
    //Hide the loader screen
});

那样，它将应用于每个组件和视图

Answer 1

您可以为此目的使用mixins，并导入组件。

LockScreenImageUrl

然后在组件中添加mixins：[importedMixins]

您将有权访问“此”。

实际上，您可以使用and vuex来（mapGetters，mapActions等）

如果您不想在每个组件中都包含mixins，请尝试使用vue插件系统（https://vuejs.org/v2/guide/plugins.html）：

Microsoft.Windows.Compatibility

并像这样//mixins.js export default { beforeCreate() {}, mounted() {} }

使用您的插件

Answer 2

在vue-router中，您的要求有些不可思议。我从没使用过afterEach，但是beforeEach完美地工作了。

router.beforeEach((to, from, next) => {
  /* must call `next` */
})

router.beforeResolve((to, from, next) => {
  /* must call `next` */
})

router.afterEach((to, from) => {})

Here is a documentation

还有一个名为“ beforeRouteEnter”的钩子。

Link to beforeRouteEnter docs

VueJS在每个组件上添加生命周期挂钩

2 个答案: