介紹

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

useRouter 的用法

在前端開(kāi)發(fā)中，我們經(jīng)常需要程序處理用戶的路由導(dǎo)航，這時(shí)候就需要用到 useRouter。它是一個(gè)用于獲取當(dāng)前路由實(shí)例的函數(shù)，我們可以調(diào)用這個(gè)函數(shù)來(lái)獲取路由實(shí)例，然后進(jìn)行路由導(dǎo)航。

useRoute 的用法

除了需要導(dǎo)航路由之外，我們還需要獲取一些路由信息，這時(shí)候就需要用到 useRoute。它是一個(gè)用于獲取當(dāng)前路由對(duì)象的函數(shù)，我們可以調(diào)用這個(gè)函數(shù)來(lái)獲取路由的參數(shù)、查詢參數(shù)等信息。

安裝路由

npm install vue-router

引入路由

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

定義變量

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

使用

(1)、路由跳轉(zhuǎn)($router)

方式一：

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

方式二：

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

(2)、獲取參數(shù)。

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

在上面的代碼中，我們首先導(dǎo)入了 vue-router 中的 useRoute，然后在 setup 函數(shù)中調(diào)用了這個(gè)函數(shù)。最后，我們返回了一個(gè)對(duì)象，這個(gè)對(duì)象包含了當(dāng)前路由對(duì)象中的完整路徑、路由參數(shù)、查詢參數(shù)等信息。

總結(jié)

useRouter 和 useRoute 是 Vue.js 3.2 中新增的兩個(gè)用于路由管理的 Composition API。 useRouter 用于獲取路由實(shí)例。而 useRoute 用于獲取當(dāng)前路由對(duì)象。使用這兩個(gè) API，我們可以更加方便地管理前端路由，提高開(kāi)發(fā)效率。

參考文獻(xiàn)

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