vue 嵌套路由，父级 重复调用，怎么解决？

Question

vue有如下路由嵌套：
/ > app.vue > a.vue >b.vue

app.vue是入口，a是2级路由 ，b是a的子级

当访问b路由时,写在a中的请求和一些列钩子事件都会被重复调用，该如何解决？

比如app.vue中的created里面有数据请求，访问a或者b时都会重复调用app.vue中的钩子。

1. 是我的放置思路不对吗?还是vue本身就只能这么做？
2. 有没有解决办法?

Answer 1

在父组件的created或者mounted 判断路由名字 来执行接口

mounted() {
    if (this.$router.currentRoute.name == 'ViewMain') {
      this.父组件执行方法();
    }
 }

Answer 2

理论上来说切换嵌套路由时并不会触发父组件中的created方法。

可能因为你设置了keep-alive加了一些判断重选渲染页面导致的。

Answer 3

按照你的描述，如果是直接打开应用，通过 url 直接访问B，那么整个链路上的 created 肯定全部会被调用，这是必然的，如果你先打开啊，然后再跳转到 b，那么 app 和 a 的 created 肯定不会被调用，这也是必然的

Answer 4

我也遇到这问题了，每次进入嵌套的子路由，父路由的生命周期又会走一遍，导致父路由内的组件被重复创建。有时还会出现创建了2个父路由内组件实例的情况。

找了半天最后发现是在父路由本身被<keep-alive>导致的。

把<keep-alive>去掉，一切正常。

我的结构是这样
App.vue > parent.vue > child.vue
访问时url是这样
http://localhost:3000/#/parent/child

问题就是出在App.vue中

<keep-alive>
  <router-view ></router-view> // 导航到parent.vue
</keep-alive>

去掉keep-alive就行