Vue是一款輕量級的JavaScript框架，讓構建Web應用程序更加簡單、高效。Vue提供了一些有用的功能，比如vue-router來使頁面間的導航更加方便。然而，有時我們需要在導航過程中增加一些交互，比如在用戶換頁時，讓未激活的導航項灰顯。

在Vue中，我們可以輕松實現這樣的功能。首先，我們需要安裝vue-router，并在項目中引入。vue-router為我們提供了beforeEnter函數，可以在導航進入之前執行一些邏輯。我們可以利用這個函數灰顯導航項。

import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
const router = new Router({
routes: [
{
path: '/',
name: 'home',
component: () =>import('@/views/Home.vue')
},
{
path: '/about',
name: 'about',
component: () =>import('@/views/About.vue')
}
]
})
router.beforeEach((to, from, next) =>{
// 遍歷所有導航項，在未激活的項上添加灰顯class
const menuItems = document.querySelectorAll('.menu-item')
menuItems.forEach(item =>{
if (item.getAttribute('href').slice(1) !== to.name) {
item.classList.add('disabled')
} else {
item.classList.remove('disabled')
}
})
next()
})

上面的代碼中，在頁面導航執行前，遍歷了所有的導航項，并根據當前導航項的激活狀態，添加或者刪除灰顯Class。接下來就可以在CSS中定義灰顯Class：

.menu-item.disabled{
opacity: 0.3;
cursor: not-allowed;
}

這里，我們通過opacity調整導航項的透明度，使其灰顯。同時，禁用了未激活的導航項的指針事件。這意味著，用戶在未激活的導航項上單擊時，不會響應導航事件。

這是Vue中實現導航灰顯的簡單方法，可根據項目的需求進行適當的調整。在開發中，我們應該善于利用框架提供的工具和API，提高代碼的可維護性和可擴展性。