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)文章
tdesign-vue是TDesign 適配桌面端的組件庫，適合在 vue 2 技術(shù)棧項目中使用，這篇文章主要介紹了vue項目中使用TDesign?,需要的朋友可以參考下2023-04-04
Vue數(shù)據(jù)增刪改查與表單驗證的實現(xiàn)流程介紹
這篇文章主要介紹了Vue數(shù)據(jù)增刪改查與表單驗證的實現(xiàn)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-10-10
這篇文章主要介紹了通過cordova將vue項目打包為webapp的方法,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-02-02
Vue.js中用webpack合并打包多個組件并實現(xiàn)按需加載
對于現(xiàn)在前端插件的頻繁更新，我也是無力吐槽，但是既然入了前端的坑就得認(rèn)嘛，所以多多少少要對組件化有點(diǎn)了解，下面這篇文章主要給大家介紹了在Vue.js中用webpack合并打包多個組件并實現(xiàn)按需加載的相關(guān)資料，需要的朋友可以參考下。2017-02-02
本文主要介紹了vue實現(xiàn)瀏覽器桌面通知的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-01-01
vue如何使用window.open打開頁面并拼接參數(shù)
這篇文章主要介紹了vue如何使用window.open打開頁面并拼接參數(shù)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
vue中el-tree增加節(jié)點(diǎn)后如何重新刷新
這篇文章主要介紹了vue中el-tree增加節(jié)點(diǎn)后如何重新刷新，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
vue通過js動態(tài)修改元素的樣式，如果是固定的幾個樣式，我常用的是綁定元素的calss,給不同的class寫好需要的樣式，js控制是否使用這個class2022-09-09
vue實現(xiàn)左右伸縮方式(el-drawer自定義位置展開收縮)
這篇文章主要介紹了vue實現(xiàn)左右伸縮方式(el-drawer自定義位置展開收縮),具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-07-07
這篇文章主要為大家詳細(xì)介紹了Vue實現(xiàn)簡單計算器，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-01-01