Vue.js 是一款流行的前端框架，由于其易用性和靈活性，在開發(fā)中得到了廣泛的應(yīng)用。而在 Vue.js 3.2 中，新增了許多 Composition API，其中 UseRouter 和 UseRoute 可以用于路由管理，使得前端路由開發(fā)更加方便。
介紹
Vue.js 是一款流行的前端框架，由于其易用性和靈活性，在開發(fā)中得到了廣泛的應(yīng)用。而在 Vue.js 3.2 中，新增了許多 Composition API，其中 useRouter 和 useRoute 可以用于路由管理，使得前端路由開發(fā)更加方便。
useRouter 的用法
在前端開發(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，我們可以更加方便地管理前端路由，提高開發(fā)效率。
參考文獻(xiàn)
- Vue Router: Composition API<br>https://next.router.vuejs.org/guide/advanced/composition-api.html。
?文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-596212.html
?文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-596212.html
?
到了這里，關(guān)于Vue.js 3.2 中 UseRouter 和 UseRoute 的用法詳解的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
