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