vue3路由新玩法useRoute和useRouter詳解
原來的vue2路由是通過this.$route和this.$router來控制的?，F(xiàn)在vue3有所變化，useRoute相當于以前的this.$route，而useRouter相當于this.$router
我們通過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)碼等問題，當然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則是將當前的路由記錄替換掉，替換后你如果回退，會發(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
?? ??? ?})
?? ?}
}當我調(diào)用push方法傳入replace為true時，真的就是replace的形式，傳入replace為false才恢復正常
然后我又試了一下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。
當然了，你可能還有許多關(guān)于vue3使用路由的問題，去這里基本都可以得到解決 https://router.vuejs.org/zh/api/
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了Vue如何循環(huán)提取對象數(shù)組中的值,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2020-11-11
今天小編就為大家分享一篇對vue 鍵盤回車事件的實例講解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
這篇文章主要為大家詳細介紹了如何在vue中封裝axios請求并集中管理,w文中的示例代碼講解詳細,具有一定的參考價值,有需要的小伙伴可以了解下2023-10-10
vue調(diào)用谷歌授權(quán)登錄獲取用戶通訊錄的實現(xiàn)示例
本文主要介紹了vue調(diào)用谷歌授權(quán)登錄獲取用戶通訊錄的實現(xiàn)示例，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2022-07-07
Elementui表格組件+sortablejs實現(xiàn)行拖拽排序的示例代碼
這篇文章主要介紹了Elementui表格組件+sortablejs實現(xiàn)行拖拽排序，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-08-08
這篇文章主要為大家詳細介紹了Vue使用百度地圖實現(xiàn)城市定位，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-08-08
computed是vue的配置選項,它的值是一個對象,其中可定義多個計算屬性,每個計算屬性就是一個函數(shù),下面這篇文章主要給大家介紹了關(guān)于vue中計算屬性computed的詳細講解,需要的朋友可以參考下2022-11-11
vue中經(jīng)常使用到和這類表單元素,vue對于這些元素的數(shù)據(jù)綁定和我們以前經(jīng)常用的jQuery有些區(qū)別,下面這篇文章主要給大家介紹了關(guān)于vue?v-model的相關(guān)資料,需要的朋友可以參考下2022-04-04
這篇文章主要為大家詳細介紹了vue實現(xiàn)商品多選功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
這篇文章主要介紹了Vue手機號正則匹配，姓名加密展示,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-08-08