该方法的主要要点,是需要在index.vue文件上让<app-main>
标签回到顶部,但是在index.vue文件里面不知道页面的跳转,所以需要将方法传输到子组件中,让子组件 使用父组件的方法,使得能够执行backup方法。
<!-- src/layout/index/index.vue -->
<div class="indexlayout-right-main" id="indexLayoutRight" style="background-color: #f1f4f5;">
<app-main v-if="isRouterAlive" />
<layout-index-right-footer />
</div>
<script>
export default {
provide() { // 使用provide可以将index.vue的方法传递给子组件
return {
reload: this.reload,
backup: this.backup
}
},
methods: {
// reload的方法是页面重新刷新的方法,在另一篇csdn文章有说明
reload() {
this.isRouterAlive = false;
this.$nextTick(function() {
this.isRouterAlive = true;
}
},
backup() {
// 获取indexLayoutRight的对象并使他跳转到顶部
document.getElementById("indexLayoutRight").scrollTo(0, 0)
}
}
}
</script>
<!-- src/layout/index/LayoutIndexLeft.vue -->
<el-menu
:bakcground-color="variables.menuBg"
……
@select="handleSelect"
>
<script>
// 使用inject可以将父组件的方法引用出来
inject: ['reload', 'backup'],
methods: {
handleSelect(index) {
// 在这里使用this.backup(),可以在父组件上生效
this.backup();
if (index === this.$route.path) {
// reload的方法是页面重新刷新的方法,在另一篇csdn文章有说明
this.reload();
}
}
}
</script>