vue-element-admin 根据条件刷新

整体思路

在进入页面前先由路由守卫对传入参数进行判断，然后给此页面的data中参数refreshFlag赋值；在进入vue生命周期activated中进行判断refreshFlag,是否需要刷新页面，如果需要刷新则调用刷新方法。

使用路由守卫

以下是路由守卫的三个方法，及在各个方法是否能够使用 ‘this’

beforeRouteEnter (to, from, next) {
    // 在渲染该组件的对应路由被 confirm 前调用
    // 不能获取组件实例 `this`
    // 因为当钩子执行前，组件实例还没被创建
},

beforeRouteUpdate (to, from, next) {
    // 在当前路由改变，但是该组件被复用时调用
    // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
    // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
    // 可以访问组件实例 `this`
},

beforeRouteLeave (to, from, next) {
    // 导航离开该组件的对应路由时调用
    // 可以访问组件实例 `this`
}

VUE生命周期的使用

created：在创建vue对象时，当html渲染之前就触发；但是注意，只会触发一次、
mounted：是挂载vue实例后的钩子函数，钩子在主页挂载时执行一次，如果没有缓存的话，再次回到主页时，此函数还会执行。
activated：是组件被激活后的钩子函数，每次回到页面都会执行。
执行顺序：created => mounted =>activated

vue生命周期钩子 （mounted 加载数据没有缓存用，使用缓存后mounted和created都只执行一次，再次进入页面后不能够执行在其里面的方法，所以使用activated 配合keep-alive组件）。

废话不说直接上代码

具体代码如下：

data() {
    return {
        ......
        refreshFlag: false
    }
},
beforeRouteEnter(to, from, next) {
    const xxx = to.params.xxx
    // 判断条件对refreshFlag进行赋值
    if (xxx === undefined) {
      next(vm => {
        // 因为当钩子执行前，组件实例还没被创建
        // vm 就是当前组件的实例相当于上面的 this，所以在 next 方法里你就可以把 vm 当 this 来用了。
        vm.refreshFlag = false
      })
    } else {
      next(vm => {
        vm.refreshFlag = true
      })
    }
},
activated() {
    console.log('activated......')
    if (this.refreshFlag) {
        doRefresh()
    }
},
......