介紹

Vue.js 是一款流行的前端框架，由于其易用性和靈活性，在開發中得到了廣泛的應用。而在 Vue.js 3.2 中，新增了許多 Composition API，其中 useRouter 和 useRoute 可以用于路由管理，使得前端路由開發更加方便。

useRouter 的用法

在前端開發中，我們經常需要程序處理用戶的路由導航，這時候就需要用到 useRouter。它是一個用于獲取當前路由實例的函數，我們可以調用這個函數來獲取路由實例，然后進行路由導航。

useRoute 的用法

除了需要導航路由之外，我們還需要獲取一些路由信息，這時候就需要用到 useRoute。它是一個用于獲取當前路由對象的函數，我們可以調用這個函數來獲取路由的參數、查詢參數等信息。

安裝路由

npm install vue-router

引入路由

import { useRouter, useRoute } from 'vue-router'

定義變量

const $router = useRouter()  // 這是路由跳轉的
const $route = useRoute()  // 用于接收路由參數的

使用

(1)、路由跳轉($router)

方式一：

$router.push('/add?name=12&age=12') // add/是要跳轉的路由  name、age是參數

方式二：

$router.push({path: '/add', query: {
    name: "12",
    age: 12
}})

(2)、獲取參數。

const name = route.query.name  // 獲取路由的name參數值
const age = route.query.age  // 獲取路由的age參數值

在上面的代碼中，我們首先導入了 vue-router 中的 useRoute，然后在 setup 函數中調用了這個函數。最后，我們返回了一個對象，這個對象包含了當前路由對象中的完整路徑、路由參數、查詢參數等信息。

總結

useRouter 和 useRoute 是 Vue.js 3.2 中新增的兩個用于路由管理的 Composition API。 useRouter 用于獲取路由實例。而 useRoute 用于獲取當前路由對象。使用這兩個 API，我們可以更加方便地管理前端路由，提高開發效率。

參考文獻

• Vue Router: Composition API<br>https://next.router.vuejs.org/guide/advanced/composition-api.html。