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

我会带着你远行 2022-03-01 01:26 440阅读 0赞

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

**（1）router-link-exact-active**

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

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

![20190321140723616.png][]

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

![20190321140612497.png][]

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

![20190321140819397.png][]

**（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组件

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>

效果：

![20190322152020383.png][]

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

[20190321140723616.png]: /images/20220301/ca0539ea92904b609c90d11c2665c147.png
[20190321140612497.png]: /images/20220301/08c8075629974d74a25cad001f212c01.png
[20190321140819397.png]: /images/20220301/ec1d59edff2b46ee9e96f770223d53b3.png
[20190322152020383.png]: /images/20220301/bd0c326bdffb48959d8ee3b5bc12bdbd.png