如何解决为何要使用参数来防止组件在Vue路由器中重新加载?
因此,我刚进入Vue路由器参数主题,在该主题中演示了如何使用参数:id
来防止重新加载组件。因此,我必须使用watch
钩子来检测$route.params
中的任何更改并在其上呈现内容。
那么这种方法的优势是什么?为什么不只使用延迟加载方法来更快地呈现页面?首先,我认为组件的 state 将保持不变,但是我使用checkbox
进行了测试,并且它不会保留以前的组件状态。
/***** About.vue *****/
<template>
<div>
<div class="about">
<h1>This is an about page</h1>
<input type='checkbox' />
<about-comp1 v-if="$route.params.id ==='sub1'"></about-comp1>
<about-comp2 v-else-if="$route.params.id ==='sub2'"></about-comp2>
<about-comp3 v-else-if="$route.params.id ==='sub3'"></about-comp3>
</div>
</div>
</template>
<script>
import about_comp1 from "@/components/about-comp1.vue"
import about_comp2 from "@/components/about-comp2.vue"
import about_comp3 from "@/components/about-comp3.vue"
export default {
components: {
"about-comp1": about_comp1,"about-comp2": about_comp2,"about-comp3": about_comp3
},computed: {
sub(){
return this.$route.params
}
},watch: {
sub: {
handler: function(){
console.log(this.sub.id);
},immediate: true
}
}
}
</script>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。