Vue实现active点击切换样式

需求：

点击谁就让谁下面加一个border并且字体变白色

方法：

1.在Router路由添加一个属性linkExactActiveClass: 'active',active是可以更改的。这个属性是精确匹配当前的路由

效果：

2.在Router路由添加一个属性router-link-active：'active',active是可以更改的。这个属性研究的不是很透彻，有大佬可以指点一下，这个属性不会精确匹配，不管你点击那个路由，首页的样式都存在

效果：

问题：当有子菜单的时候这两个属性就解决不了（太菜了，这两个属性也不清楚怎么弄，大佬可以私信我指点一二）

解决方案：

我的解决方案就是判断当前的路由，然后添加样式

效果：

 

希望能为大家解决一点问题。也希望大家如果觉得那里不好，可以评论或者私信我。我希望能和大家一起学习，交流。