VUE页面刷新实战

背景

在进行VUE开发时，往往会出现需要实现当前页面操作完毕后，返回一个列表页面，如果用 this.$router.go(-1) 的方法，页面不会刷新。如果是没有操作，问题不大，但如果我们执行的是删除或添加动作，希望的效果是重新刷新页面，显示操作后的列表页面，这时，用 this.$router.go(-1) 就不能满足需求了。

解决方案

研究了一下，有多种解决方案，我选择了下面的解决方案：

1. 先定义一个空页面，接收需要跳转的目标页面
2. 需要跳转到列表页面的函数，不要直接跳到列表页面，先用push方法跳到空页面，同时把目标页面作为参数传给空页面
3. 这样利用VUE的路由跳转功能，可以让页面流转比较流畅，不会出现页面闪烁的情况。

代码

1. 定义空页面

   <template>
   <div class="Empty-form"></div>
   </template> 
     
   <script>
   import { useRoute } from 'vue-router';
     var topath = "";
   
     export default({
       setup() {
         const route = useRoute();
         topath = route.params.topath;
       },
   
       created(){
           this.$router.replace({ path: topath });
       }
    });
     
   </script>

2. 定义空页面路由

   {
       path: '/empty/:topath',
       name: 'Empty',
       component: EmptyView,
     },

   此处注意：如果需要传参数，必须把参数定义在path里。

3. 页面跳转，传递参数

   this.$router.push({name:'Empty', params: { topath: '/questionlist' }})

   此处注意：带参数push，请用‘name’ 指定页面。