vue 二级路由只能显示一级引用内容

Question

问题描述

访问二级路由组件，仅能显示一级路由引用的组件

相关代码

// 请把代码文本粘贴到下方（请勿用图片代替代码）
main.js:
import Vue from 'vue'
import App from './App'
import router from './router'
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})

router/index.js
import Vue from 'vue'
import Router from 'vue-router'
import Login from '@/components/login'
import Findpw from '@/components/login/findpw'
import Register from '@/components/register'

Vue.use(Router)

export default new Router({
mode: 'history',
routes: [

{
  path: '/',
  redirect: '/login'
},
{
  path: '*',
  redirect: '/login'
},
{
  path: '/login',
  name: 'Login',
  component: Login,
  children: [
    {
      path: '/login/findpw',
      name: 'findpw',
      component: Findpw
    }
  ]
},
{
  path: '/register',
  name: 'Register',
  component: Register
}

]
})

你期待的结果是什么？实际看到的错误信息又是什么？

在浏览器中：
1、访问 /，能够重定向并显示login内容
2、访问 * 和、login和register都能显示对应内容
3、期望是访问 /login/findpw，显示findpw的组件，但显示的却是它的上级“login”的组件内容

求各位前辈解答

Answer 1

{
path: '/login',
name: 'Login',
component: Login,
children: [

{
  path: 'findpw',
  name: 'findpw',
  component: Findpw
}

]
},

Answer 2

{
  path: '/login',
  name: 'Login',
  component: Login,
  children: [
    {
      path: 'findpw',
      name: 'findpw',
      component: Findpw
    }
  ]
},

并且配置<router-view></router-view>