步入正题,解决今天的问题代码首先我们要对app.Vue进行修改代码:<template> <div id="app"> <nav-View v-show="login&
首先我们要对app.Vue进行修改
代码:
<template>
<div id="app">
<nav-View v-show="login" />
<router-view v-if="isRouterAlive" /> <!-- 进行v-if判断 -->
<foot-View v-show="login" />
</div>
</template>
<script>
import navView from "@/components/navView.vue";
import footView from "@/components/footer.vue";
import { onMounted, ref, watch ,nextTick,provide,} from "vue";//要引入方法
import { useRouter } from "vue-router";
export default {
name: "app",
components: {
navView,
footView,
},
created() {
console.log("123", this.$route.path);
},
setup() {
// 局部组件刷新
const isRouterAlive = ref(true);
const reload = () => {
isRouterAlive.value = false;
nextTick(() => {
isRouterAlive.value = true;
});
};
provide("reload", reload);
return {
isRouterAlive,
};
},
watch: {
},
};
</script>
<style>
* {
margin: 0px;
}
#app {
font-family: "Avenir", Helvetica, Arial, sans-serif;
-WEBkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
}
</style>
接下来就是子组件(分页的调用)
代码:
<template>
<div>
<!-- input框输入值,点击按钮,看值会不会清空 -->
<input type="text">
</div>
<button @click="refresh">页面刷新</button>
</template>
<script>
import { inject } from "vue";
export default{
setup() {
const refresh = inject("reload");
//在方法体中的调用方法
// refresh();
return {
refresh,
};
},
};
</script>
--结束END--
本文标题: Vue3页面局部刷新组件的刷新问题怎么解决
本文链接: https://www.lsjlt.com/news/210613.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
2023-05-25
2023-05-25
2023-05-25
2023-05-25
2023-05-25
2023-05-24
2023-05-24
2023-05-24
2023-05-24
2023-05-24
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0