vue路由跳转后高亮问题|active class(激活状态)linkActiveClass 和 linkExactActiveClass以及exact

linkActiveClass 是模糊匹配
linkExactActiveClass 是精准匹配
exact也是精准的意思

问题

看下边图片:

当css样式为#nav a.router-link-exact-active { color: #42b983; }时,如果下边没有子路由不会有什么问题,但是如果有子集路由的话,当你点击小说下边的子集路由小说就不会高亮
图片如下:

解决这个问题只需要改变css为#nav a.router-link-active { color: #42b983; }
对比初始的css样式少了个exact
然后把这个单词写到app.vue文件中

<div id="app">
    <div id="nav">
      <router-link to="/" exact>首页</router-link> |
      <router-link to="/about">小说</router-link>|
      <router-link to="/algin">登录</router-link>

    </div>
    <router-view/>
  </div>
</template>

加上后出现如下效果(点击子路由的时候小说正常高亮):

主路由的问题解决了,但是还有一个问题当点击小说时,子路由没有默认的显示
效果如下:(子路由没有默认显示的组件就是第一个页面没有显示)

解决:（在父路由中重定向到你要默认显示的路由redirect:'/about/qihuan'）

改完后点击小说页面出现如下效果:(点击小说直接显示默认的奇幻内容)