在Vue.js中，路由與導航是構建單頁應用程序（SPA）的關鍵概念。在使用Vue Router時，您可以使用兩種方式來進行路由與導航：聲明式路由和程序式導航。本文將詳細介紹這兩種方式，幫助您理解它們的用法和優勢。

聲明式路由

聲明式路由是指使用特定的組件來定義導航鏈接，通過在模板中聲明來進行路由導航。這種方式更加直觀和易懂，適用于大多數導航場景。

使用 <router-link> 定義導航鏈接

在Vue Router中，您可以使用<router-link>組件來創建聲明式的導航鏈接。

<template><div><router-link to="/home">首頁</router-link><router-link to="/about">關于我們</router-link></div>
</template>

在上述代碼中，<router-link>會被渲染成一個帶有to屬性的鏈接。點擊鏈接時，Vue Router會根據to屬性的值進行路由跳轉。

程序式導航

程序式導航是指使用JavaScript代碼來實現路由導航，通常在組件中進行。這種方式適用于需要在邏輯中動態控制導航的場景。

使用 $router.push() 實現導航

Vue Router提供了$router對象，您可以使用$router.push()方法來進行程序式導航。

<template><div><button @click="goToHome">去往首頁</button><button @click="goToAbout">去往關于我們</button></div>
</template><script>
export default {methods: {goToHome() {this.$router.push('/home');},goToAbout() {this.$router.push('/about');}}
};
</script>

在上述代碼中，點擊按鈕時，通過調用$router.push()方法進行路由導航。

使用 $router.replace() 進行替換導航

除了$router.push()，還可以使用$router.replace()進行導航，但不會在瀏覽器的歷史記錄中留下記錄。

使用 $router.go() 進行歷史導航

如果需要在歷史記錄中前進或后退，可以使用$router.go()方法。

<template><div><button @click="goBack">后退</button><button @click="goForward">前進</button></div>
</template><script>
export default {methods: {goBack() {this.$router.go(-1);},goForward() {this.$router.go(1);}}
};
</script>

聲明式 vs 程序式導航

聲明式路由更適合用于靜態導航，因為您只需在模板中定義鏈接，即可實現路由跳轉。這種方式適用于大多數情況，能夠在代碼中更清晰地表達導航意圖。

程序式導航則適用于需要在邏輯中根據條件動態控制導航的情況，比如表單提交后進行路由跳轉、條件判斷后進行頁面切換等。

在Vue.js中，聲明式路由和程序式導航是實現路由與導航的兩種主要方式。聲明式路由使用<router-link>在模板中定義鏈接，適用于靜態導航；程序式導航使用$router.push()等方法，在JavaScript代碼中實現導航，適用于動態控制導航的情況。通過選擇合適的方式，您可以更靈活地實現頁面之間的切換和導航，從而構建出更具交互性和用戶友好性的單頁應用程序。