vue $router和$route的區(qū)別詳解
一、router為VueRouter的實(shí)例，相當(dāng)于一個(gè)全局的路由器對(duì)象，里面含有很多屬性和子對(duì)象，例如history對(duì)象。。。經(jīng)常用的跳轉(zhuǎn)鏈接就可以用this.$router.push，和router-link跳轉(zhuǎn)一樣。。。
this.$router.push會(huì)往history棧中添加一個(gè)新的記錄。。詳細(xì)見(jiàn)vue官方文檔
route相當(dāng)于當(dāng)前正在跳轉(zhuǎn)的路由對(duì)象。?？梢詮睦锩娅@取name,path,params,query等。。
打印this.$route和this.$router。
路由傳參的方式
1.可以手寫完整的path：
this.$router.push({path:`/user/${userId}`})
這樣傳遞參數(shù)的話，配置路由的時(shí)候需要在path上加參數(shù)path：user/：userId。
這種接收參數(shù)的方式是this.$route.params.userId。
2.也可以用params傳遞：
3.也可以用query傳遞：
query傳參是針對(duì)path的，params傳參是針對(duì)name的。。接收參數(shù)的方式都差不多。。this.$route.query.和this.$route.params.
注意這只是跳轉(zhuǎn)url，跳轉(zhuǎn)到這個(gè)url顯示什么組件，得配置路由。router跳轉(zhuǎn)和<router-link>標(biāo)簽跳轉(zhuǎn)，規(guī)則差不多。
展示上的話：
注意：如果提供了path，params將會(huì)被忽略，但是query不屬于這種情況。。。
如果使用完整路徑和query傳參，刷新頁(yè)面時(shí)不會(huì)造成路由傳參的參數(shù)丟失。
這個(gè)vue官方文檔講的很詳細(xì)。
二、有時(shí)候配置路由時(shí)path有時(shí)候會(huì)加 '/' 有時(shí)候不加,例如path:'name'和path:'/name'。區(qū)別其實(shí)官方文檔說(shuō)了，我當(dāng)時(shí)沒(méi)仔細(xì)看，導(dǎo)致這個(gè)問(wèn)題還困擾了我很久。
意思就是以 / 開(kāi)頭的會(huì)被當(dāng)做路徑，就不會(huì)一直嵌套之前的路徑。
到此這篇關(guān)于vue $router和$route的區(qū)別詳解的文章就介紹到這了,更多相關(guān)vue $router和$route內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue-video-player 通過(guò)自定義按鈕組件實(shí)現(xiàn)全屏切換效果【推薦】
這篇文章主要介紹了vue-video-player,通過(guò)自定義按鈕組件實(shí)現(xiàn)全屏切換效果,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2018-08-08
這篇文章主要介紹了vue.js body的css不生效問(wèn)題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-06-06
vue-cli 作為 Vue 官方推薦的項(xiàng)目構(gòu)建腳手架，它提供了開(kāi)發(fā)過(guò)程中常用的，熱重載，構(gòu)建，調(diào)試，單元測(cè)試，代碼檢測(cè)等功能。我們本次的異步遠(yuǎn)端組件將基于 vue-cli 開(kāi)發(fā)2017-11-11
Vue中的路由導(dǎo)航守衛(wèi)導(dǎo)航解析流程
這篇文章主要介紹了Vue中的路由導(dǎo)航守衛(wèi)導(dǎo)航解析流程,正如其名，vue-router 提供的導(dǎo)航守衛(wèi)主要用來(lái)通過(guò)跳轉(zhuǎn)或取消的方式守衛(wèi)導(dǎo)航。這里有很多方式植入路由導(dǎo)航中：全局的，單個(gè)路由獨(dú)享的，或者組件級(jí)的2023-04-04
這篇文章主要介紹了解決Echarts 顯示隱藏后寬度高度變小的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-07-07
基于uniapp+vue3自定義增強(qiáng)版table表格組件「兼容H5+小程序+App端」
uv3-table：一款基于uniapp+vue3跨端自定義手機(jī)端增強(qiáng)版表格組件,支持固定表頭/列、邊框、斑馬紋、單選/多選,自定義表頭/表體插槽、左右固定列陰影高亮顯示,支持編譯兼容H5+小程序端+App端,H5+小程序+App端,多端運(yùn)行一致2024-05-05
這篇文章主要給大家介紹了關(guān)于vue組件的路由高亮問(wèn)題的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-05-05
深入淺出 Vue 系列 -- 數(shù)據(jù)劫持實(shí)現(xiàn)原理
深入淺出 Vue 系列 -- 數(shù)據(jù)劫持實(shí)現(xiàn)原理2019-04-04
這篇文章主要為大家介紹了vue條件渲染列表渲染原理示例解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-07-07
詳解vue后臺(tái)系統(tǒng)登錄態(tài)管理
這篇文章主要介紹了vue后臺(tái)系統(tǒng)登錄管理，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04