在Vue3中主之， Vue Router 提供新的API更好地與 Composition API 集成逐哈。提供useRouter、useRoute兩個函數又厉，在用于組件中訪問當前路由信息和路由實例。
-
useRoute
返回當前的路由地址椎瘟，這個路由對象包含了當前路由的許多信息覆致，比如路徑、參數肺蔚、查詢煌妈、hash等。相當于在模板中使用 $route。
useRoute實例
示例代碼：
import { useRoute } from 'vue-router'
export default {
setup() {
const route = useRoute()
console.log(route.path) // 輸出當前路由的路徑
console.log(route.params) // 輸出當前路由的參數
console.log(route.query) // 輸出當前路由的查詢參數
// ... 其他操作
}
}
-
useRouter
返回路由器實例璧诵。相當于在模板中使用 $router汰蜘。通過這個路由實例，我們可以進行諸如導航之宿、編程式導航等操作族操。
useRouter實例
示例代碼：
import { useRouter } from 'vue-router'
export default {
setup() {
const router = useRouter()
router.push('/home') // 導航到/home路徑
router.replace('/about') // 替換當前路由為/about路徑
router.go(-1) // 后退一步
// ... 其他操作
}
}
useRoute 和 useRouter 區(qū)別
- useRoute 主要用于獲取當前路由的信息，適用于靜態(tài)展示當前路由信息的場景比被。
- useRouter 主要用于獲取路由實例坪创，適用于需要進行動態(tài)路由操作的場景，比如跳轉到新的路由姐赡。
