vue 项目无痕刷新页面，router-view控制

vue 项目无痕刷新页面，router-view控制

vue项目开发过程中，需要在页面提交表单信息之后清空还原，即恢复页面初始状态，第一想法就是对当前页面刷新，重新加载。

想起location.reload()方式和this.$router.go(0)方式跳转，但两种方式都会出现明显的闪屏（即页面出现明显空白时间），因此研究一番之后采用router-view控制方式：

一、设置App.vue文件：
　　通过true和false值控制页面路由部分的显隐，
　　代码：

<template>
  　　<div id="app">
    　　<router-view v-if="isRouterAlive" />
  　　</div>
　　</template>

　　<script>

　　export default {
  　　provide () {
    　　return {
      　　reload: this.reload
    　　}
  　　},
  　　data () {
    　　return {
      　　isRouterAlive: true
    　　}
  　　},
  　　methods: {
    　　reload () {
      　　this.isRouterAlive = false
      　　this.$nextTick(function () {
        　　this.isRouterAlive = true
      　　})
    　　}
  　　}
　　}
　　</script>

二、在需要刷新的页面引入reload方法：
　　在js代码中，通过inject引入，在需要进行刷新的时候直接this.reload()调用即可。
　　
router-view控制的方式体验效果比较好，页面刷新时没有明显的白屏。

如果对你有帮助，记得点个赞噢（~~）

标签：vue,无痕,reload,刷新,router,view,页面
来源： https://blog.csdn.net/start_sea/article/details/119357826