Javascript 嵌套子路由器视图仍多次创建调用

场景：我有一个父组件，其中有一个路由器视图。这个父组件有两个子组件，所以当我转到其中一个子组件时，不应该调用父组件创建的钩子

问题：当我转到子组件1时，仍然会调用父组件创建的钩子。当我转到child2组件时也会发生同样的情况。为什么呢？代码似乎很简单

我很感激

父组件：

<script>
  export default {
    name: "Parent",
    created() {
      console.log("this should NOT appear on route change i.e. parent component should be rendered only once?!");
    }
  }

<template>
  <div>
    <h1>PARENT</h1>
    <hr>
    <RouterLink to="/routetest/23/profile">FIRST CHILD</RouterLink>
    <br>
    <br>
    <RouterLink to="/routetest/23/posts">SECOND CHILD</RouterLink>
    <hr>
    <RouterView />
  </div>
</template>

/routetest/23/posts

组件

<template>
  <div>
    <h1> CH1</h1>
  </div>
</template>
</script>

<template>
  <div>
    <h1> CH2</h1>
  </div>
</template>

---

这样做是为了使您的网页是搜索引擎优化。您可以将所有逻辑从

created（）

移动到

mounted（）

。。。或者，您可以在您的

标记中添加一个`v-if=“someBoolean”´。。。不确定后者是否有效，这是没有意义的。mounted也会在更改路由时执行。实际上，您的代码似乎运行良好。。父级创建的钩子只被调用一次（第一次加载父级时）。。检查这个。。因此，问题的原因应该是代码中没有的其他地方。

{
        path: '/routetest/:id',
        component: testparent,
        children: [{
            path: 'profile',
            meta: {
              authRequired: false,
              rule: 'isAll',
            },
            component: test1
          },
          {
            path: 'posts',
            meta: {
              authRequired: false,
              rule: 'isAll',
            },
            component: test2
          }
        ]
      }