vue 嵌套路由,父级 重复调用,怎么解决?

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. 有没有解决办法?

回答:

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

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

回答:

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

回答:

我也遇到这问题了,每次进入嵌套的子路由,父路由的生命周期又会走一遍,导致父路由内的组件被重复创建。有时还会出现创建了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就行

暂无评论

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注