Vue路由中的router-link-exact-active和router-link-active

1. router-link-exact-active和router-link-active这两个类名是Vue路由自带的

（1）router-link-exact-active

当路由到哪里时，该类名就添加到对应的路由标签上

比如：当点击About时，路由就跳转到About对应的页面

此时，看该路由标签的类名：

（2） 当点击Community的子路由时，该类名就会到子路由上

（3）router-link-active：路由中，子路由的path设置（比如：http://localhost:8080/home）包含了父路由的path设置（比如：http://localhost:8080/）,那么点击子路由的时候，给子路由添加router-link-active类时，父路由也有router-link-active类。

1) 我们看router.js中，组件community的配置

{
      path: '/community',
      name: 'community',
      component: Community,
      children: [
        {
          path: '/community/Academic',
          name: 'academic',
          component: Academic
        },
        {
          path: '/community/Personal',
          name: 'personal',
          component: Personal
        },
        {
          path: '/community/Download',
          name: 'download',
          component: Download
        },
      ]
    },

2）再看community组件

<template>
<div class="community">
  <div class="nav">
    <router-link to="/community/Academic">学术</router-link>
    <router-link to="/community/Personal">个人</router-link>
    <router-link to="/community/Download">下载</router-link>
  </div>
  <router-view></router-view>
</div>

</template>

3）因为community组件在App.vue组件中使用，即community组件是App.vue的子组件，我们看App.vue中Community的写法：

        <ul class="nav">
          <router-link to="/home" tag="li">Home</router-link>
          <router-link to="/about" tag="li">About</router-link>
          <router-link to="/learn" tag="li">Learn</router-link>
          <router-link to="/study" tag="li">Study</router-link>
          <router-link to="/community" tag="li">Community</router-link>
      </ul>

<style>
/* router-link-exact-active c */
    
    .router-link-active {
      border-bottom: 4px solid blue;
    }
    .router-link-exact-active {
      border-bottom: 4px solid red;
    }

 效果：

所以说：如果不想要让所有的子路由都添加样式的话，我们可以对不想添加样式的子路由的path设置为：不包含父路由的路径。