vue子路由中跳转问题

Question

我想在子路由中跳转的/setting这个路由中,url发生变化了,但是页面是空的

router的配置:

routes: [
    {
      path: '/',
      redirect: 'students',
      name: 'classManage',
      component: classManage,
      children: [
        {
          path: 'teachers',
          component: teachers
        },
        {
          path: 'students',
          component: students,
          children: [
            {
              path: 'setting',
              component: setting
            }
          ]
        }
      ]

子路由的跳转方案:

页面显示:

setting:

里边明明有内容,但是跳转明显不对

Answer 1

你的跳转之后的URL是错的，setting是在/students下的（如下），是students的子路径，所以，跳转之后，正确的路径应该是/students/setting而并非/setting，所以/setting是空的也就不奇怪了。

{
    path: 'students',
    component: students,
    children: [
        {
            path: 'setting',
            component: setting
        }
    ]
}

跳转应该写作

this.$router.push({path: '/students/setting'});

Answer 2

<router-view></router-view>

Answer 3

父页面 要添加 <router-view></router-view>