vue-router无法实现两级路由

Question

我正在尝试使用vue-router

实现两级路由

main.js

import Vue from 'vue'
import Router from 'vue-router'
import Hello from '../components/Hello.vue'
import First from '../page/firstPage.vue'
import Login from '../page/logIn.vue'
import Second from '../page/secondPage.vue'

Vue.use(Router)


const routes =[
  {
    path: '/',
    component: Login
  },
  {
    path: '/first',
    component: First,
    children: [ {
      path: 'hello',
      component: Hello
    }
    ]
  },
]
const router = new Router({
  mode:'history',
  routes:routes
})

export default router

但是当我输入http://localhost:8080/first/hello时，它会返回'First'组件而不是'Hello'组件。

非常感谢