跳转页面

使用router-link

刷新页面

在router-link页面中写方法refresh

新页面取参数 

vue如今是十分常用的前端框架，而我们在使用vue框架时总会碰到一个问题，那就是进行完所需要的操作以后如何进行页面自动刷新，以下就来说一说几种方法：
一. window.location.reload(),是原生JS提供的方法，

this.$router.go(0):是vue路由里面的一种方法,
这两种方法简单粗暴，不过有一个缺点就是，它们相当于整个页面重新刷新，这样便会出现几秒的空白页，可能会使用户感受不加。

二.控制的显示与否，在全局组件注册一个方法，该方法控制router-view的显示与否，在子组件调用即可：
(1)先修改App.vue

<template>
  <div id="app">
    <router-view v-if="isRouterAlive"></router-view>
  </div>
</template>
 
<script>
export default {
  name: 'App',
  provide() { // 注册一个方法
    return {
      reload: this.reload
    }
  },
  data() {
    return {
      isRouterAlive: true
    }
  },
  methods: {
    reload() {
      this.isRouterAlive = false
      this.$nextTick(function() {
        this.isRouterAlive = true
      })
    }
  }
}
</script>

在这里我们需要注意，有些App.vue页面中已有<router-view v-if="isRouterAlive"></router-view>
那便不需要重复声明。

(2) 在当前需要刷新的页面

<template>
    <div>
    </div>
</template>
 
<script>
    export default{
        inject: ['reload'], // 引入方法
        data(){
            return{
            }
        },
        mounted(){
　　　　　　　this.reload()  // 哪里需要在哪里调用
        },
        methods:{}
    }
</script>

这样子就相当于局部小页面刷新了，而且不会出现空白页面的跳转期，个人认为这是一个十分不错的方法。

go(-1): 原页面表单中的内容会丢失；
this.$router.go(-1)：后退+刷新；

this.$router.go(0)：刷新；

this.$router.go(1) ：前进

back(): 原页表表单中的内容会保留；
this.$router.back():后退 ；

this.$router.back(0) 刷新；

this.$router.back(1)：前进