Vue——父组件跳转子路由后当前导航active样式消失问题

效果图如下：

实现方法如下：

一级路由（personal.vue）：

<template>
  <div id="app">
    <div>
       <h4 class="routerStyle">
       <router-link to="/personal/personalwork"><span>作品管理</span></router-link>
       <router-link to="/personal/personalinvite"><span>邀请码管理</span></router-link></h4>
    </div>
    <!-- 一级路由出口 -->
    <router-view />
  </div>
</template>

<style>
/*****被选中路由高亮样式*********/
 .active{
     
    color: #ff9902;
    border-bottom: 2px solid #ff9902;
  }
</style>

二级路由(personal_invite.vue)：

<template>
    <div class="form-person">
      <div class="route-btn"><router-link class="given-btn" to="/personal/personalinvite/inviten">未发放</router-link></div><div  class="route-btn"><router-link class="give-btn" to="/personal/personalinvite/invitey">已发放</router-link></div>
      <router-view/>
    </div>
</template>

<style>
/*****被选中路由高亮样式*********/
  .active {
     
    width: 100%;
    height: 100%;
    display: inline-block;
    background-color: #ff9902;
    color: white;
  }
</style>

路由表（router.js）:

import personal from '@/pages/personal'
import personalwork from '@/pages/personal_work'
import personalinvite from '@/pages/personal_invite'
import inviten from '@/pages/personal_invite_n'
import invitey from '@/pages/personal_invite_y'
Vue.use(Router)

export default new Router({
     
  linkActiveClass: 'active', /*重点：给被选中路由添加class=active*/
  routes: [
    {
     
      path: '/',
      component: parent,
      children: [
        {
      path: '/', redirect: '/personal' },
        {
     
          path: '/personal',
          component: personal,
          meta: {
     
            title: '个人中心',
            requireAuth: true
          },
          children: [
            {
      path: '/personal', redirect: 'personalwork' }, /*重点：重定向到二级路由位置*/
            {
     
              path: '/personal/personalwork',/*重点：层级位置一定要准确*/
              component: personalwork,
            },
            {
     
              path: '/personal/personalinvite',
              component: personalinvite,
              children: [
                {
      path: '/personal/personalinvite', redirect: 'inviten' },/*重点：重定向到二级路由位置*/
                {
     
                  path: '/personal/personalinvite/inviten',/*重点：层级位置一定要准确*/
                  component: inviten,
                },
                {
     
                  path: '/personal/personalinvite/invitey',/*重点：层级位置一定要准确*/
                  component: invitey,
                }
              ]
            }
          ]
        }
      ]
    }
  ]
  })