Vue 提供了許多實(shí)用命令，其中 active 命令是用于在 Router 中定義活動鏈接的。在應(yīng)用程序中，通常會將導(dǎo)航欄作為一種通用的組件，用于在頁面上導(dǎo)航不同的路由。通過給活動鏈接添加樣式，可以使用戶更容易地知道當(dāng)前所處的位置。

/* 在 CSS 中定義活動狀態(tài)的樣式 */
.router-link-active {
color: red;
font-weight: bold;
}

在 template 中，使用 Router 中的 active 命令來指定活動鏈接的樣式。

<template>
<div>
<router-link :to="'/home'" v-bind:active-class="'router-link-active'">Home</router-link>
<router-link :to="'/about'" v-bind:active-class="'router-link-active'">About</router-link>
</div>
</template>

在上面的例子中，我們首先使用 router-link 組件來定義應(yīng)用程序中的兩個(gè)鏈接。然后，在每個(gè)鏈接中使用 v-bind 指令為 active-class 屬性綁定所需的樣式。在 Vue.js 中，v-bind 命令用于綁定 DOM 屬性和 Vue 實(shí)例的數(shù)據(jù)。

最終結(jié)果將是在當(dāng)前活動鏈接上添加 router-link-active 樣式。

/* 當(dāng)前活動鏈接 */
<a href="#" class="router-link-exact-active router-link-active">Home</a>

在 Router 中使用 active 命令，可以輕松地為應(yīng)用程序中的活動鏈接添加樣式。這不僅可以提高用戶體驗(yàn)，還可以幫助用戶更好地理解應(yīng)用程序的結(jié)構(gòu)。