如何解决Vue生命周期如何运作?并将其用于骨架和加载 App.vue
这个问题我的表情很傻,但是我被卡在了里面!
我使用的是Vuetify骨架,并创建了如下代码的数据isLoading
。在页面刷新上,一切都很好,但是在路线更改(在我的页面中来回移动)上则无法正常工作。
在我的代码中,刷新页面后btn
被禁用,mycomponent
在其文件中使用相同的isLoading
显示框架。但是当我继续前进并返回它时,我的btn已加载而不是禁用,一段时间后未显示骨骼,而加载了mycomponent!
出什么问题了!我认为这与使用生命周期有关!
<template>
<div>
<v-btn :disabled="isLoading">Button</v-btn>
<mycomponent />
</div>
</template>
<script>
import mycomponent from '~/components/mycomponent'
export default {
components:{
'mycomponent': mycomponent
},data(){
return{
isLoading: true
}
},created(){
this.isLoading = true
},mounted(){
this.isLoading = false
}
}
</script>
mycomponent:
<template>
<v-skeleton-loader
:loading="isLoading"
type="button"
width="100%"
>
<v-btn>Button</v-btn>
</v-skeleton-loader>
</template>
<script>
export default {
data(){
return{
isLoading: true
}
},mounted(){
this.isLoading = false
}
}
</script>
所以问题:仅当我第一次登陆页面或刷新浏览器时,它才起作用。通过前进并返回此页面,disable button
和skeleton on component
均无效。
更新
我正在使用NuxtJs v2.13
解决方法
创建vue实例时调用created
钩子,并且在DOM中安装了vue实例时调用mounted
钩子。第一次将组件路由至或刷新页面时,将调用这些挂钩。这就解释了为什么只有当您第一次进入页面或刷新浏览器时,它才起作用。
在安装组件后,在浏览器上按返回按钮将不会调用created
和mounted
钩子。
要解决您的问题,您可以这样做,观看$route
对象
App.vue
watch: {
'$route' () {
// this will be called any time the route changes
this.isLoading = true // you can think of a way to make isLoading false
}
},
有关生命周期挂钩的更多信息,请查看此article。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。