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设置为:不包含父路由的路径。

Logo

前往低代码交流专区

更多推荐