快捷導(dǎo)航

vue3路由新玩法useRoute和useRouter詳解

更新時間：2022年08月05日 09:22:19 作者：可缺不可濫

這篇文章主要介紹了vue3路由新玩法useRoute和useRouter，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

我們通過useRouter來手動控制路由變化

import { useRouter } from 'vue-router'
export default {
?? ?setup() {
?? ??? ?const userRouter = useRouter()
?? ??? ?userRouter.push("/home")
?? ?}
}

通過useRouter傳參的三種方式

隱式傳參params

import { useRouter } from 'vue-router'
export default {
?? ?setup() {
?? ??? ?const userRouter = useRouter()
?? ??? ?userRouter.push({
?? ??? ??? ?name: 'Home',
?? ??? ??? ?params: {
?? ??? ??? ??? ?name: 'dx',
?? ??? ??? ??? ?age: 18
?? ??? ??? ?}
?? ??? ?})
?? ?}
}

請注意params只與name搭配生效，name就是route配置時的name

const routes: Array<RouteRecordRaw> = [
? {
? ? path: '/',
? ? name: 'Home',
? ? component: Home
? }
]

通過useRoute來接收params參數(shù)

import { useRoute } from 'vue-router'
export default {
?? ?setup() {
?? ??? ?const route = useRoute()
? ? ?? ?console.log(route.params)
?? ?}
}

顯式傳參query

import { useRouter } from 'vue-router'
export default {
?? ?setup() {
?? ??? ?const userRouter = useRouter()
?? ??? ?userRouter.push({
?? ??? ??? ?path: '/',
?? ??? ??? ?query: {
?? ??? ??? ??? ?name: 'dx',
?? ??? ??? ??? ?age: 18
?? ??? ??? ?}
?? ??? ?})
?? ?}
}

path與query是一對，name和params是一對，請別混用。

通過useRoute來接收query參數(shù)

import { useRoute } from 'vue-router'
export default {
?? ?setup() {
?? ??? ?const route = useRoute()
? ? ?? ?console.log(route.query)
?? ?}
}

總結(jié)一下顯式路由和隱式路由的區(qū)別

除了他們的傳遞和接收方式不同外

顯式query會很明顯的跟在新的url上，而隱式params不會

隱式params在刷新后可能會消失，我們可以在它存在的時候存如緩存中，如localstorage

隱式params比顯式query相對而言更安全，不會將參數(shù)直接暴露給用戶

顯示query在瀏覽器的url上，如果你直接通過字符串的方式去取，可能會涉及轉(zhuǎn)碼等問題，當(dāng)然useRoute將這些都處理好了，所以還是推薦通過useRoute.query去取顯式路由的參數(shù)

動態(tài)路由傳參

首頁跟以前一樣，我們在配置頁面路由的時候就需要配置動態(tài)路由的名稱，這里配置id

const routes: Array<RouteRecordRaw> = [
? {
? ? path: '/about/:id',
? ? name: 'About',
? ? component: About
? }
]

useRouter 傳遞動態(tài)參數(shù)id = 1 ，大多數(shù)時候動態(tài)參數(shù)都是簡單數(shù)據(jù)類型，如果不是，你沒必要用動態(tài)參數(shù)。

import { useRouter } from 'vue-router'
export default {
?? ?setup() {
?? ??? ?const userRouter = useRouter()
?? ??? ?userRouter.push({
?? ??? ??? ?path: '/about/1',
?? ??? ?})
?? ?}
}

通過useRoute來接收動態(tài)參數(shù)的方式和params一樣

import { useRoute } from 'vue-router'
export default {
?? ?setup() {
?? ??? ?const route = useRoute()
? ? ?? ?console.log(route.params)
?? ?}
}

useRouter 的push和replace

push就是如上面的代碼一樣，就是在瀏覽器的歷史記錄中追加一個新的記錄，你可以通過window.history看到這個記錄。

而replace則是將當(dāng)前的路由記錄替換掉，替換后你如果回退，會發(fā)現(xiàn)上一個路由地址已經(jīng)消失了。

import { useRouter } from 'vue-router'
export default {
?? ?setup() {
?? ??? ?const userRouter = useRouter()
?? ??? ?userRouter.replace({
?? ??? ??? ?path: '/about/1',
?? ??? ?})
?? ?}
}

我在無意之間發(fā)現(xiàn)一個有意思的問題，也不知道是不是一個bug

import { useRouter } from 'vue-router'
export default {
?? ?setup() {
?? ??? ?const userRouter = useRouter()
?? ??? ?userRouter.push({
?? ??? ??? ?path: '/about/1',
?? ??? ??? ?replace: true
?? ??? ?})
?? ?}
}

當(dāng)我調(diào)用push方法傳入replace為true時，真的就是replace的形式，傳入replace為false才恢復(fù)正常

然后我又試了一下replace

import { useRouter } from 'vue-router'
export default {
?? ?setup() {
?? ??? ?const userRouter = useRouter()
?? ??? ?userRouter.replace({
?? ??? ??? ?path: '/about/1',
?? ??? ??? ?replace: false
?? ??? ?})
?? ?}
}

import { useRouter } from 'vue-router'
export default {
?? ?setup() {
?? ??? ?const userRouter = useRouter()
?? ??? ?userRouter.replace({
?? ??? ??? ?path: '/about/1',
?? ??? ??? ?push: true
?? ??? ?})
?? ?}
}

以上兩種方式都是replace的形式。

push的時候傳入replace為true結(jié)果是replace，那還需要replace方法么，也不知道是不是bug。

當(dāng)然了，你可能還有許多關(guān)于vue3使用路由的問題，去這里基本都可以得到解決 https://router.vuejs.org/zh/api/

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: