在前端開發中，導航欄是一個非常重要的組件，可以實現頁面之間的跳轉以及頁面內部的跳轉。在Vue中，我們可以非常便捷地實現一個動態切換導航。

首先，我們需要在Vue組件中定義一個數據，用來表示當前選中的導航項：

data() {
return {
activeIndex: 'home'
}
}

在上述代碼中，我們定義了一個名為activeIndex的數據，初始值為'home'，表示默認選中的導航項是首頁。接下來，我們在模板中渲染導航欄：

<ul class="nav">
<li :class="{ active: activeIndex === 'home' }"><a @click="activeIndex = 'home'">首頁</a></li>
<li :class="{ active: activeIndex === 'about' }"><a @click="activeIndex = 'about'">關于我們</a></li>
<li :class="{ active: activeIndex === 'contact' }"><a @click="activeIndex = 'contact'">聯系我們</a></li>
</ul>

上述代碼中，我們使用了:class指令，實現了當當前選中的導航項為某一項時，對該項的li元素添加一個名為active的CSS類，以實現頁面選中效果。同時，在每一個a元素上，我們通過@click指令，實現了點擊某一項導航時，修改activeIndex的值，從而實現動態切換導航。

為了讓用戶看到選中效果，我們需要在CSS中定義.active類的樣式：

.nav li.active a {
color: #f00;
}

在上述代碼中，我們定義了.active類的樣式，將選中導航項的文字顏色設置為紅色。

通過上述的代碼實現，我們可以非常方便地實現一個動態切換導航。當然，如果你希望使用更加完善的導航組件，可以使用Vue官方提供的Vue Router插件。