摘要

除了使用 <router-link> 進行聲明式導航外，我們還可以在 JavaScript 邏輯中，透過路由器實例的方法來命令式地、程式化地進行頁面跳轉。

定義與說明

在元件的 <script setup> 中，可以透過 useRouter() 鉤子來獲取路由器實例。該實例提供了多個導航方法，最常用的是 router.push()，它可以接收一個字串路徑或一個描述位置的物件。

實作範例

編程式導航示例

<script setup>
import { useRouter } from 'vue-router';
const router = useRouter();

function goToUserPage(userId) {
  // 帶有名稱和參數的導航
  router.push({ name: 'user', params: { id: userId } });
}
</script>
<template>
  <button @click="goToUserPage(123)">前往使用者 123 的頁面</button>
</template>

結論

編程式導航為我們提供了在事件處理或非同步操作完成後進行頁面跳轉的能力，是實現複雜互動流程（如登入成功後跳轉）的必要工具。

編程式導航 useRouter router.push