Vue实现页面的局部刷新(router-view页面刷新)

极客

　　本文主要介绍了Vue实现页面的局部刷新(router-view页面刷新)，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

2. 利用Vue里面的provide+inject组合

复制代码

　　首先需要修改App.vue。

2. ‹template>
3.   ‹!-- 公司管理 -->
4.   ‹div class="companyManage">
5.     ‹router-view v-if="isRouterAlive">‹/router-view>
6.   ‹/div>
7. ‹/template>
9. ‹script>
10. export default {
11.   name: "companyManage",
12.   watch: {},
13.   provide() {
14.     return {
15.       reload:this.reload
16.     }
17.   },
18.   data() {
19.     return {
20.       isRouterAlive:true
21.     };
22.   },
23.   methods: {
24.     reload() {
25.       this.isRouterAlive = false;
26.       this.$nextTick( () => {
27.         this.isRouterAlive = true;
28.       })
29.     }
30.   },
31.   mounted() {}
32. };
33. ‹/script>
35. ‹style scoped>
36. .companyManage {
37.   width: 100%;
38.   height: 100%;
39.   position: relative;
40.   background: #fff;
41. }
42. ‹/style>

复制代码

　　2. 到需要刷新的页面进行引用，使用inject导入引用reload，然后直接调用即可。

2. inject:["reload"],
3. this.reload();

复制代码

　　到此这篇关于Vue实现页面的局部刷新(router-view页面刷新)的文章就介绍到这了,更多相关Vue 页面局部刷新内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

---