Vuejs2 什么'；s的条件是挂钩：“；“路由之前”；是否将触发vue中的组件？

我是Vue.js新手，在学习navigation guard挂钩时遇到了一些问题。 我为Foo组件和Home组件设置了组件挂钩：“beforeRouteEnter”。当浏览器转到“/”时，它将重定向到“/home”，而Foo是home的默认子组件，因此它将被渲染，并触发Foo组件挂钩。我知道以上所有，我想知道的是：

• 当路由从“/home”更改为“/home/foo”时，foo组件为 确实重复使用了，为什么会触发Foo组件的钩子
• 当路由从“/home/foo”更改为“/home”时，foo的钩子 组件将被触发，但主组件也被重复使用，为什么 主元件的挂钩未触发

请参阅

家
//JS
康斯特之家={
模板：`
我是家里的一员

福
`,
路由前（到、从、下一个）{
警报（'从'+from.path+'到'+to.path'输入主组件）
下一个（）
}
}
常数Foo={
模板：`
我是富组件

`,
路由前（到、从、下一个）{
警报（'从'+from.path+'到'+to.path'输入foo组件）
下一个（）
}
}
常数路由=[
{
路径：“/”，
重定向：'/home'
},
{
路径：'/home'，
组成部分：家庭，
儿童：[
{
路径：“foo”，
组成部分：富
},
{
路径：“”，
组成部分：富
}
]
}
]
常量路由器=新的VueRouter({
路线
})
新Vue({
el:“演示”，
路由器
}) 

<!-- html-->    
<script src="https://unpkg.com/vue"></script>
    <script src="https://unpkg.com/vue-router"></script>
    <div id="demo">
      <router-link to="/home">Home</router-link>
      <router-view></router-view>
    </div>

//JS    
const Home = {
        template: `
      <div>
        <p>I am home component</p>
        <router-link to="/home/foo">Foo</router-link>
        <router-view></router-view>
      </div>
      `,
      beforeRouteEnter(to, from, next) {
        alert('enter home component from ' + from.path + ' to ' + to.path)
        next()
      }
    }
    const Foo = {
        template: `
      <div>
        <p>I am foo component</p>
      </div>
      `,
      beforeRouteEnter(to, from, next) {
        alert('enter foo component from ' + from.path + ' to ' + to.path)
        next()
      }
    }

    const routes = [
        {
        path: '/',
        redirect: '/home'
      },
      {
        path: '/home',
        component: Home,
        children: [
            {
            path: 'foo',
            component: Foo
          },
          {
            path: '',
            component: Foo
          }
        ]
      }
    ]

    const router = new VueRouter({
        routes
    })

    new Vue({
        el: "#demo",
      router
    })