Vue Router 是 Vue.js 的官方路由管理器，允許我們在單頁面應用中導航。但是，在某些情況下，我們希望防止用戶跳轉到某些路由或跳轉路由的前提條件不滿足。在這種情況下，我們可以使用 Vue Router 的導航守衛來防止跳轉。

const router = new VueRouter({
routes: [
{
path: '/login',
component: Login
},
{
path: '/dashboard',
component: Dashboard,
meta: {
requiresAuth: true
}
}
]
});
router.beforeEach((to, from, next) =>{
if (to.matched.some(record =>record.meta.requiresAuth) && !isLoggedIn()) {
next('/login');
} else {
next();
}
});

Vue Router 的導航守衛分為三個部分：全局守衛、路由獨享守衛和組件內守衛。在這個例子中，我們使用全局前置守衛 beforeEach 來檢查用戶是否已經登錄。如果用戶未登錄，我們將路由重定向到登錄頁（/login）。

在這個例子中，我們使用 meta 字段來標識需要身份驗證的路由。所以，我們只需要在導航守衛中檢查路由的 meta 字段是否為 true。如果為 true，則說明用戶必須登錄才能訪問該路由。

function isLoggedIn() {
return localStorage.getItem('token');
}

在這個例子中，我們使用一個簡單的函數來檢查用戶是否已經登錄。在實際應用中，您可以根據需求實現不同的驗證機制，如 cookie、session、JWT 等。

總之，使用 Vue Router 的導航守衛可以幫助我們防止用戶跳轉到不滿足前提條件的路由。此外，導航守衛還提供其他功能，如在切換路由前提示用戶、在路由切換時取消異步操作等。希望這篇文章對您有所幫助。