vue中使用keep-alive缓存页面后 解决页面不刷新的问题 以及使用路由守卫后页面重复获取数据的问题

vue中keep-alive缓存机制

在vueRouter中 给菜单指定keepAlive时 就能让页面第一次进入后缓存页面

不使用keep-alive时 钩子的执行顺序

beforeRouterEnter --> created --> mounted --> destoryed

使用keep-alive时 钩子的执行顺序

1、第一次进入缓存界面 beforeRouterEnter --> created --> mounted --> activated --> deactivated
2、第二次进入缓存界面 beforeRouterEnter --> activated --> deactivated

如上所知，第二次进入页面不会执行created、mounted钩子，若需要获取信息的时候，就需要在beforeRouterEnter里获取数据

这时就会发现一个问题，第一次请求时，beforeRouterEnter里请求了数据，created里也请求了数据(一般情况都是在created里请求数据) 就请求了两次 这个问题怎么解决呢？

看以下代码

created() {
    console.log(1);
  },
  mounted() {
    console.log(2);

  },
  beforeRouteEnter(to, from, next) {
    console.log(3);
    next(vm => {
      console.log(4);
    })
  }

第一次进入代码执行顺序

3 -> 1 -> 4 -> 2

第二次进入代码执行顺序

4 -> 2

解决方法:

虽然beforeRouterEnter在created和mounted之前就执行了，但是next()的执行顺序却是在created之后，所以可以在created里获取数据的时候给一个flag= true，如果flag为真(created里获取了数据)，则next不做任何操作，若未获取数据，flag为假，则next里执行获取数据操作 这样就不会有获取数据重复的问题 记住每次执行完beforeRouterEnter的时候将flag置为false，不置为false的话，下一次进入页面还是true，next和created里都不执行获取数据的操作