建站
咨詢
售后
建站咨詢
新聞中心
介紹
Vue.js 是一款流行的前端框架，由于其易用性和靈活性，在開發(fā)中得到了廣泛的應(yīng)用。而在 Vue.js 3.2 中，新增了許多 Composition API，其中 useRouter 和 useRoute 可以用于路由管理，使得前端路由開發(fā)更加方便。
成都創(chuàng)新互聯(lián)是一家專注于網(wǎng)站建設(shè)、成都網(wǎng)站設(shè)計(jì)與策劃設(shè)計(jì),犍為網(wǎng)站建設(shè)哪家好?成都創(chuàng)新互聯(lián)做網(wǎng)站,專注于網(wǎng)站建設(shè)十余年,網(wǎng)設(shè)計(jì)領(lǐng)域的專業(yè)建站公司;建站業(yè)務(wù)涵蓋:犍為等地區(qū)。犍為做網(wǎng)站價(jià)格咨詢:028-86922220
useRouter 的用法
在前端開發(fā)中，我們經(jīng)常需要程序處理用戶的路由導(dǎo)航，這時(shí)候就需要用到 useRouter。它是一個(gè)用于獲取當(dāng)前路由實(shí)例的函數(shù)，我們可以調(diào)用這個(gè)函數(shù)來獲取路由實(shí)例，然后進(jìn)行路由導(dǎo)航。
useRoute 的用法
除了需要導(dǎo)航路由之外，我們還需要獲取一些路由信息，這時(shí)候就需要用到 useRoute。它是一個(gè)用于獲取當(dāng)前路由對象的函數(shù)，我們可以調(diào)用這個(gè)函數(shù)來獲取路由的參數(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è)對象，這個(gè)對象包含了當(dāng)前路由對象中的完整路徑、路由參數(shù)、查詢參數(shù)等信息。
總結(jié)
useRouter 和 useRoute 是 Vue.js 3.2 中新增的兩個(gè)用于路由管理的 Composition API。 useRouter 用于獲取路由實(shí)例。而 useRoute 用于獲取當(dāng)前路由對象。使用這兩個(gè) API，我們可以更加方便地管理前端路由，提高開發(fā)效率。
參考文獻(xiàn)
- Vue Router: Composition API
https://next.router.vuejs.org/guide/advanced/composition-api.html。
本文名稱：Vue.js3.2中UseRouter和UseRoute的用法詳解
鏈接分享：http://m.fisionsoft.com.cn/article/dhhsohc.html
