遇到过的页面生命周期多次调用的情况(因为声明了多个vue实例)

28 阅读1分钟
  • 之前遇到了一个问题,每个页面都多次调用了生命周期,导致页面也多次调用了接口,寻找了半天的问题,最后发现是写了两个vue实例导致

  • 一般来说,main.js里会有一个vue实例

  • 当时我又写了一个的原因是,在调取接口的js文件里,需要判断接口请求头里是否有token,没有就跳转到登录页,而js文件里使用this.$router.push({ path: '/Login' })不起作用,因为this不是vue实例,所以就新建了一个vue实例这样确实能正常跳转了

  • 但是后来才发现,页面加载会加载接口的文件,所以除了main.js的vue实例,又多了一个vue实例,导致页面渲染了两遍,所以生命周期都走了两遍,里面的接口也都走了两遍

  • 解决办法:不要新建一个vue实例,将main里的vue实例导出,然后再别的文件引入使用