$router.push()中通過(guò)path跳轉(zhuǎn)和通過(guò)name跳轉(zhuǎn)區(qū)別解析
今天在路由跳轉(zhuǎn)傳參時(shí)發(fā)現(xiàn)params傳參接收到的總是為空，才發(fā)現(xiàn)通過(guò)path和name傳參是有區(qū)別的
- path傳參要完整的路徑，不能帶參數(shù)。name傳參可以帶params。
- params的傳參頁(yè)面刷新會(huì)丟失，query的傳參不會(huì)丟失
使用path進(jìn)行跳轉(zhuǎn)：
當(dāng)你使用path進(jìn)行跳轉(zhuǎn)時(shí)，你需要提供完整的路徑字符串，包括路徑和查詢參數(shù)（如果有的話）。例如：
this.$router.push({ path: '/user/123' })使用path進(jìn)行跳轉(zhuǎn)的優(yōu)點(diǎn)是路徑是靜態(tài)的，你可以直接指定要跳轉(zhuǎn)到的路徑。但是，如果你需要傳遞參數(shù)或查詢參數(shù)，你需要手動(dòng)構(gòu)建完整的路徑字符串。
使用name進(jìn)行跳轉(zhuǎn)：
當(dāng)你使用name進(jìn)行跳轉(zhuǎn)時(shí)，你只需要提供路由的名稱，而不需要手動(dòng)構(gòu)建路徑字符串。Vue Router會(huì)自動(dòng)解析并找到對(duì)應(yīng)的路徑。例如：
this.$router.push({ name: 'User' });使用name進(jìn)行跳轉(zhuǎn)的優(yōu)點(diǎn)是你可以通過(guò)簡(jiǎn)單的名稱來(lái)指定要跳轉(zhuǎn)到的路由，而不需要手動(dòng)構(gòu)建路徑字符串。同時(shí)，Vue Router會(huì)自動(dòng)解析并找到對(duì)應(yīng)的路徑。此外，當(dāng)使用命名路由時(shí)，你還可以傳遞參數(shù)，例如：
this.$router.push({ name: 'User', params: { userId: 123 } });這樣，Vue Router會(huì)自動(dòng)將userId參數(shù)填充到路徑中。
總而言之，使用path和name進(jìn)行跳轉(zhuǎn)的主要區(qū)別在于：使用path時(shí)，你需要手動(dòng)構(gòu)建完整的路徑字符串；而使用name時(shí)，你可以通過(guò)簡(jiǎn)單的名稱來(lái)指定路由，并可以傳遞參數(shù)。
到此這篇關(guān)于$router.push()中通過(guò)path跳轉(zhuǎn)和通過(guò)name跳轉(zhuǎn)有什么區(qū)別的文章就介紹到這了,更多相關(guān)$router.push() 跳轉(zhuǎn)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
VUE elTree無(wú)子級(jí)隱藏展開(kāi)圖標(biāo)方式
這篇文章主要介紹了VUE elTree無(wú)子級(jí)隱藏展開(kāi)圖標(biāo)方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2025-04-04
vue不操作dom實(shí)現(xiàn)圖片輪播的示例代碼
這篇文章主要介紹了vue不操作dom實(shí)現(xiàn)圖片輪播的示例代碼，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-12-12
本篇文章主要介紹了如何理解Vue的render函數(shù)的具體用法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-08-08
這篇文章主要介紹了Vue.js之render函數(shù)使用詳解,本篇文章通過(guò)簡(jiǎn)要的案例,講解了該項(xiàng)技術(shù)的了解與使用,以下就是詳細(xì)內(nèi)容,需要的朋友可以參考下2021-09-09
這篇文章主要介紹了Vue.js之VNode的使用，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-04-04
vue使用js-file-download完成導(dǎo)出功能實(shí)例
這篇文章主要介紹了vue使用js-file-download完成導(dǎo)出功能實(shí)例,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-07-07
這篇文章主要為大家詳細(xì)介紹了VUE項(xiàng)目中封裝Echart折線圖的方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
詳解基于Vue的支持?jǐn)?shù)據(jù)雙向綁定的select組件
這篇文章主要介紹了詳解基于Vue的支持?jǐn)?shù)據(jù)雙向綁定的select組件，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09
如果我們?cè)诿總€(gè)組件中去重復(fù)定義這些屬性和方法會(huì)使得項(xiàng)目出現(xiàn)代碼冗余并提高了維護(hù)難度，針對(duì)這種情況官方提供了Mixins特性，這時(shí)使用Vue mixins混入有很大好處，下面就介紹下Vue mixins混入使用方法，需要的朋友參考下吧2022-12-12
vuex通過(guò)getters訪問(wèn)數(shù)據(jù)為undefined問(wèn)題及解決
這篇文章主要介紹了vuex通過(guò)getters訪問(wèn)數(shù)據(jù)為undefined問(wèn)題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08