vue中使用watch监听$route 无效问题

路由：

{ // 首页
  path: '/',
  name: 'index',
  component: resolve => require(['@/views/index/index'], resolve),
},

监听:

watch: {
  '$route'(to, from) {
    console.log(to, from)
  }
},

{ // 首页
  path: '/',
  name: 'index',
  component: resolve => require(['@/views/index/index'], resolve),
  children: [
    {
      path: 'user',
      name: 'user',
      component: resolve => require(['@/views/index/user'], resolve),
    },
    {
      path: 'userName',
      name: 'userName',
      component: resolve => require(['@/views/index/userName'], resolve),
    },
  ]
},

发现页面跳转时，并没有监听输出内容，就是没有监听到。路由组件的渲染区域为 router-view，作为顶层出口（官方是这么叫的）它将匹配到的路由组件渲染在该区域中。所以就是需要有子路由才可以监听到！