Vue腳手架中的Nav（導航）組件是一種用于使用router進行路由跳轉(zhuǎn)的Vue組件。

在Vue項目中，我們經(jīng)常需要在不同頁面之間進行跳轉(zhuǎn)和導航。Nav組件可以幫助我們快速構(gòu)建導航菜單，提供路由跳轉(zhuǎn)的功能，并且可以根據(jù)當前路由動態(tài)設(shè)置菜單選中狀態(tài)。

// Nav組件示例代碼
<template>
<div>
<nav>
<ul>
<li :class="{ active: $route.path === '/home' }">
<router-link to="/home">首頁</router-link>
</li>
<li :class="{ active: $route.path === '/about' }">
<router-link to="/about">關(guān)于</router-link>
</li>
<li :class="{ active: $route.path === '/contact' }">
<router-link to="/contact">聯(lián)系我們</router-link>
</li>
</ul>
</nav>
<router-view />
</div>
</template>
<script>
export default {
name: 'Nav',
data() {
return {
menus: [
{ name: '首頁', path: '/home' },
{ name: '關(guān)于', path: '/about' },
{ name: '聯(lián)系我們', path: '/contact' },
]
}
}
}
</script>

在上述代碼中，Nav組件使用了<router-link>來進行路由跳轉(zhuǎn)，并使用<router-view>顯示路由對應(yīng)的頁面內(nèi)容。同時，使用了:class動態(tài)綁定了菜單項的選中狀態(tài)，根據(jù)$route.path來判斷當前路由是否與菜單項對應(yīng)。

通過使用Nav組件，我們可以快速構(gòu)建具有導航功能的Vue應(yīng)用，提高開發(fā)效率。