Lớp giả: hoạt động không giống như việc thêm một lớp để tạo kiểu cho phần tử.
Lớp giả CSS: active đại diện cho một phần tử (chẳng hạn như một nút) đang được kích hoạt bởi người dùng. Khi sử dụng chuột, "kích hoạt" thường bắt đầu khi nút chuột được nhấn xuống và kết thúc khi nó được thả ra.
Những gì chúng tôi đang tìm kiếm là một lớp, chẳng hạn như .active, chúng tôi có thể sử dụng để tạo kiểu cho mục điều hướng.
Để có ví dụ rõ ràng hơn về sự khác biệt giữa :activevà .activexem đoạn mã sau:
li:active {
background-color: #35495E;
}
li.active {
background-color: #41B883;
}
<ul>
<li>:active (pseudo-class) - Click me!</li>
<li class="active">.active (class)</li>
</ul>
Vue-Router
vue-routertự động áp dụng hai lớp đang hoạt động .router-link-activevà .router-link-exact-active, cho <router-link>thành phần.
Lớp này được áp dụng tự động cho <router-link>thành phần khi tuyến mục tiêu của nó được khớp.
Cách thức hoạt động của điều này là sử dụng hành vi đối sánh toàn diện. Ví dụ: <router-link to="/foo">sẽ áp dụng lớp này miễn là đường dẫn hiện tại bắt đầu bằng /foo/hoặc bằng /foo.
Vì vậy, nếu chúng ta có <router-link to="/foo">và <router-link to="/foo/bar">, cả hai thành phần sẽ nhận được router-link-activelớp khi đường dẫn là /foo/bar.
Lớp này được áp dụng tự động cho <router-link>thành phần khi tuyến mục tiêu của nó là một đối sánh chính xác . Hãy xem xét rằng cả hai lớp router-link-activevà router-link-exact-activesẽ được áp dụng cho thành phần trong trường hợp này.
Sử dụng cùng một ví dụ, nếu chúng ta có <router-link to="/foo">và <router-link to="/foo/bar">, router-link-exact-activelớp sẽ chỉ được áp dụng <router-link to="/foo/bar">khi đường dẫn là /foo/bar.
Giả sử chúng ta có <router-link to="/">, điều sẽ xảy ra là thành phần này sẽ hoạt động cho mọi tuyến đường. Điều này có thể không phải là một cái gì đó mà chúng ta muốn, vì vậy chúng tôi có thể sử dụng exactprop như vậy: <router-link to="/" exact>. Bây giờ thành phần sẽ chỉ được áp dụng lớp đang hoạt động khi nó khớp chính xác tại /.
CSS
Chúng ta có thể sử dụng các lớp này để tạo kiểu cho phần tử của mình, như sau:
nav li:hover,
nav li.router-link-active,
nav li.router-link-exact-active {
background-color: indianred;
cursor: pointer;
}
Các <router-link>thẻ được thay đổi bằng cách sử dụng tagprop, <router-link tag="li" />.
Thay đổi các lớp mặc định trên toàn cầu
Nếu chúng ta muốn thay đổi các lớp mặc định được cung cấp bởi vue-routertoàn cục, chúng ta có thể làm như vậy bằng cách chuyển một số tùy chọn cho vue-routercá thể như sau:
const router = new VueRouter({
routes,
linkActiveClass: "active",
linkExactActiveClass: "exact-active",
})
Thay đổi các lớp mặc định cho mỗi cá thể thành phần ( <router-link>)
Thay vào đó, nếu chúng ta muốn thay đổi các lớp mặc định cho mỗi <router-link>và không phải trên toàn cục, chúng ta có thể làm như vậy bằng cách sử dụng các thuộc tính active-classvà exact-active-classnhư sau:
<router-link to="/foo" active-class="active">foo</router-link>
<router-link to="/bar" exact-active-class="exact-active">bar</router-link>
Vue Router 3.1.0+ cung cấp khả năng tùy chỉnh mức độ thấp thông qua một khe có phạm vi . Điều này rất hữu ích khi chúng ta muốn tạo kiểu cho phần tử bao bọc, giống như phần tử danh sách <li>, nhưng vẫn giữ logic điều hướng trong phần tử neo <a>.
<router-link
to="/foo"
v-slot="{ href, route, navigate, isActive, isExactActive }"
>
<li
:class="[isActive && 'router-link-active', isExactActive && 'router-link-exact-active']"
>
<a :href="href" @click="navigate">{{ route.fullPath }}</a>
</li>
</router-link>
