vue3路由新玩法useRoute和useRouter詳解
原來(lái)的vue2路由是通過(guò)this.$route和this.$router來(lái)控制的?，F(xiàn)在vue3有所變化，useRoute相當(dāng)于以前的this.$route，而useRouter相當(dāng)于this.$router
我們通過(guò)useRouter來(lái)手動(dòng)控制路由變化
import { useRouter } from 'vue-router'
export default {
?? ?setup() {
?? ??? ?const userRouter = useRouter()
?? ??? ?userRouter.push("/home")
?? ?}
}通過(guò)useRouter傳參的三種方式
隱式傳參params
import { useRouter } from 'vue-router'
export default {
?? ?setup() {
?? ??? ?const userRouter = useRouter()
?? ??? ?userRouter.push({
?? ??? ??? ?name: 'Home',
?? ??? ??? ?params: {
?? ??? ??? ??? ?name: 'dx',
?? ??? ??? ??? ?age: 18
?? ??? ??? ?}
?? ??? ?})
?? ?}
}請(qǐng)注意params只與name搭配生效，name就是route配置時(shí)的name
const routes: Array<RouteRecordRaw> = [
? {
? ? path: '/',
? ? name: 'Home',
? ? component: Home
? }
]通過(guò)useRoute來(lái)接收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是一對(duì)，name和params是一對(duì)，請(qǐng)別混用。
通過(guò)useRoute來(lái)接收query參數(shù)
import { useRoute } from 'vue-router'
export default {
?? ?setup() {
?? ??? ?const route = useRoute()
? ? ?? ?console.log(route.query)
?? ?}
}總結(jié)一下顯式路由和隱式路由的區(qū)別
除了他們的傳遞和接收方式不同外
顯式query會(huì)很明顯的跟在新的url上，而隱式params不會(huì)
隱式params在刷新后可能會(huì)消失，我們可以在它存在的時(shí)候存如緩存中，如localstorage
隱式params比顯式query相對(duì)而言更安全，不會(huì)將參數(shù)直接暴露給用戶
顯示query在瀏覽器的url上，如果你直接通過(guò)字符串的方式去取，可能會(huì)涉及轉(zhuǎn)碼等問(wèn)題，當(dāng)然useRoute將這些都處理好了，所以還是推薦通過(guò)useRoute.query去取顯式路由的參數(shù)
動(dòng)態(tài)路由傳參
首頁(yè)跟以前一樣，我們?cè)谂渲庙?yè)面路由的時(shí)候就需要配置動(dòng)態(tài)路由的名稱(chēng)，這里配置id
const routes: Array<RouteRecordRaw> = [
? {
? ? path: '/about/:id',
? ? name: 'About',
? ? component: About
? }
]useRouter 傳遞動(dòng)態(tài)參數(shù)id = 1 ，大多數(shù)時(shí)候動(dòng)態(tài)參數(shù)都是簡(jiǎn)單數(shù)據(jù)類(lèi)型，如果不是，你沒(méi)必要用動(dòng)態(tài)參數(shù)。
import { useRouter } from 'vue-router'
export default {
?? ?setup() {
?? ??? ?const userRouter = useRouter()
?? ??? ?userRouter.push({
?? ??? ??? ?path: '/about/1',
?? ??? ?})
?? ?}
}通過(guò)useRoute來(lái)接收動(dòng)態(tài)參數(shù)的方式和params一樣
import { useRoute } from 'vue-router'
export default {
?? ?setup() {
?? ??? ?const route = useRoute()
? ? ?? ?console.log(route.params)
?? ?}
}useRouter 的push和replace
push就是如上面的代碼一樣，就是在瀏覽器的歷史記錄中追加一個(gè)新的記錄，你可以通過(guò)window.history看到這個(gè)記錄。
而replace則是將當(dāng)前的路由記錄替換掉，替換后你如果回退，會(huì)發(fā)現(xiàn)上一個(gè)路由地址已經(jīng)消失了。
import { useRouter } from 'vue-router'
export default {
?? ?setup() {
?? ??? ?const userRouter = useRouter()
?? ??? ?userRouter.replace({
?? ??? ??? ?path: '/about/1',
?? ??? ?})
?? ?}
}我在無(wú)意之間發(fā)現(xiàn)一個(gè)有意思的問(wèn)題，也不知道是不是一個(gè)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時(shí)，真的就是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的時(shí)候傳入replace為true結(jié)果是replace，那還需要replace方法么，也不知道是不是bug。
當(dāng)然了，你可能還有許多關(guān)于vue3使用路由的問(wèn)題，去這里基本都可以得到解決 https://router.vuejs.org/zh/api/
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue如何循環(huán)提取對(duì)象數(shù)組中的值
這篇文章主要介紹了Vue如何循環(huán)提取對(duì)象數(shù)組中的值,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-11-11
對(duì)vue 鍵盤(pán)回車(chē)事件的實(shí)例講解
今天小編就為大家分享一篇對(duì)vue 鍵盤(pán)回車(chē)事件的實(shí)例講解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-08-08
這篇文章主要為大家詳細(xì)介紹了如何在vue中封裝axios請(qǐng)求并集中管理,w文中的示例代碼講解詳細(xì),具有一定的參考價(jià)值,有需要的小伙伴可以了解下2023-10-10
vue調(diào)用谷歌授權(quán)登錄獲取用戶通訊錄的實(shí)現(xiàn)示例
本文主要介紹了vue調(diào)用谷歌授權(quán)登錄獲取用戶通訊錄的實(shí)現(xiàn)示例，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-07-07
Elementui表格組件+sortablejs實(shí)現(xiàn)行拖拽排序的示例代碼
這篇文章主要介紹了Elementui表格組件+sortablejs實(shí)現(xiàn)行拖拽排序，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08
這篇文章主要為大家詳細(xì)介紹了Vue使用百度地圖實(shí)現(xiàn)城市定位，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-08-08
Vue計(jì)算屬性與監(jiān)視屬性詳細(xì)分析使用
computed是vue的配置選項(xiàng),它的值是一個(gè)對(duì)象,其中可定義多個(gè)計(jì)算屬性,每個(gè)計(jì)算屬性就是一個(gè)函數(shù),下面這篇文章主要給大家介紹了關(guān)于vue中計(jì)算屬性computed的詳細(xì)講解,需要的朋友可以參考下2022-11-11
vue中經(jīng)常使用到和這類(lèi)表單元素,vue對(duì)于這些元素的數(shù)據(jù)綁定和我們以前經(jīng)常用的jQuery有些區(qū)別,下面這篇文章主要給大家介紹了關(guān)于vue?v-model的相關(guān)資料,需要的朋友可以參考下2022-04-04
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)商品多選功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
Vue手機(jī)號(hào)正則匹配姓名加密展示功能的實(shí)現(xiàn)
這篇文章主要介紹了Vue手機(jī)號(hào)正則匹配，姓名加密展示,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-08-08