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控制的方式体验效果比较好，页面刷新时没有明显的白屏。

end