举个栗子,导航栏如下图,当前新闻资讯的路由是:localhost:8083/#/new,导航栏样式如图所示:
这里写图片描述
随便挑个新闻点击后会跳转到子路由:localhost:8083/#/new/newDetail,这时候新闻资讯的主路由style样式出现消失的问题,如下图:
这里写图片描述
style代码:

.router-link-exact-active{
    color: #8fc526!important;
    border-top: 4px solid #8fc526!important;
  }

router.js代码:

{
      path: '/new',
      name: 'new',
      component: news,
      children: [
        {
          path: '/new/newDetail',
          name: 'newDetail',
          component: newsDetail
        }
      ]
    }

解决方案:
将style方案改成下面即可

.router-link-active{
    color: #8fc526!important;
    border-top: 4px solid #8fc526!important;
}

类名设置为router-link-active,即使是跳转到子路由也不会影响到主路由的样式问题

Logo

前往低代码交流专区

更多推荐