Vue是一種JavaScript框架，可用于構(gòu)建交互式用戶界面。Vue通常與Vue Router一起使用，以創(chuàng)建單頁面應(yīng)用程序（SPA）。SPA具有多個頁面，但只在應(yīng)用程序的初始加載期間加載一次。該應(yīng)用程序的剩余部分由異步JavaScript下載。Vue Router是一個官方的Vue.js路由管理器。它允許開發(fā)人員使用Vue.js構(gòu)建單頁面應(yīng)用程序。

Vue Router提供一組可以幫助您在應(yīng)用程序的不同頁面之間導(dǎo)航的指令。Vue Router中的導(dǎo)航選中是一個重要的概念。當(dāng)您的用戶瀏覽您的Vue.js應(yīng)用程序時，他們可能會希望知道他們是否在哪個頁面上，以及哪些頁面是活動的。Vue Router的導(dǎo)航選中功能解決了這個問題，因為它可以告訴您當(dāng)前選中的頁面和導(dǎo)航條中活動的鏈接。

const router = new VueRouter({
routes: [
{
path: '/about',
component: About
},
{
path: '/contact',
component: Contact
},
{
path: '/blog',
component: Blog
}
]
})
Vue.component('nav-link', {
props: ['url'],
template: '<router-link :to="url" :class="{ active: $route.path === url }"><slot></slot></router-link>'
})

要添加Vue Router中的導(dǎo)航選中，請使用上面的代碼片段中所示的Vue.js組件。創(chuàng)建一個自定義Vue.js組件，并將其命名為nav-link。在該組件中，您可以將任何URL傳遞給該組件作為參數(shù)。該組件使用router-link，該指令是Vue Router中的一個非常有用的指令。router-link允許您將路由鏈接視為組件，并向其添加某些樣式類或自定義內(nèi)容。

在該組件的模板中，您可以使用slot插槽，對其進(jìn)行自定義。該插槽可以幫助您向該組件中添加一個標(biāo)題、一個圖標(biāo)或者其他任何東西。該組件還使用v-bind指令設(shè)置樣式類，從而告訴Vue Router何時應(yīng)該激活該鏈接并將其設(shè)置為選中狀態(tài)。如果$route.path等于傳遞給nav-link組件的URL，則Vue Router會自動為該鏈接設(shè)置活動狀態(tài)。