vue嵌套路由query传值遇到的问题

Question

①在TopNavMenu组件中通过query方式跳转到goods页面并传传递参数search：

this.$router.push({path: '/goodss', query: {search: this.search}})

②在goods页面接收并打印：

// 监听路由变化，更新路由传递的搜索条件
$route: function (val) {
      if (val.path === '/goodss') {
        if (val.query.search !== undefined) {
          console.log(val.query.search)
          this.activeName = '-1'
          this.currentPage = 1
          this.total = 0
          this.search = val.query.search
        }
      }
    }

③在home页面搜索输入search后成功跳转，路由改变：http://localhost:8080/goodss?search=测试，但没有打印search
④但在goods页面进行输入search后却能成功打印search
⑤路由配置如下：

{
      path: '/index',
      name: 'AppIndex',
      component: AppIndex,
      redirect: '/home',
      children: [
        {
          path: '/home',
          name: 'Home',
          component: Home
        },
        {
          path: '/goodss',
          component: Goodsss
        }

其中AppIndex如下（TopNavMenu为其组件）：

<template>
  <div>
    <top-nav-menu></top-nav-menu>
    <router-view/>
  </div>
</template>

<script>
import TopNavMenu from '../common/TopNavMenu'
export default {
  name: 'AppIndex',
  components: {TopNavMenu}
}
</script>

<style scoped>

</style>

请问为什么会出现这种问题？