【vue-router】 自用复习

当需要为 当前激活的 router-link 添加样式时  我通常会使用 router-link-active 本次复习重新学习了一下

 

router-link-active & router-link-exact-active

　　router-link-active   当你多重嵌套路由时 嵌套的多个页面都会有该类

　　router-link-exact-active  当你多重嵌套路由时 只有最后一层路由会有该类

　　eg:

const routes = [
  {
    path: '/user/:username',
    component: User,
    children: [
      {
        path: 'role/:roleId',
        component: Role,
      }
    ]
  }
]

<RouterLink to="/user/erina">
  User
</RouterLink>
<RouterLink to="/user/erina/role/admin">
  Role
</RouterLink>

此时 如果使用 router-link-active

此时 如果 /user/erina 时  User 一定是激活状态的

但是如果是 /user/erina/role/admin 时 User还是激活的，这明显是不对的 此时使用 router-link-exact-active 只有Role 激活

router-link-active 会在User和Role 都添加类

router-link-exact-active 只会给Role 添加类