vue $router和$route的區(qū)別詳解
一、router為VueRouter的實例，相當于一個全局的路由器對象，里面含有很多屬性和子對象，例如history對象。。。經(jīng)常用的跳轉鏈接就可以用this.$router.push，和router-link跳轉一樣。。。
this.$router.push會往history棧中添加一個新的記錄。。詳細見vue官方文檔
route相當于當前正在跳轉的路由對象。?？梢詮睦锩娅@取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.
注意這只是跳轉url，跳轉到這個url顯示什么組件，得配置路由。router跳轉和<router-link>標簽跳轉，規(guī)則差不多。
展示上的話：
注意：如果提供了path，params將會被忽略，但是query不屬于這種情況。。。
如果使用完整路徑和query傳參，刷新頁面時不會造成路由傳參的參數(shù)丟失。
這個vue官方文檔講的很詳細。
二、有時候配置路由時path有時候會加 '/' 有時候不加,例如path:'name'和path:'/name'。區(qū)別其實官方文檔說了，我當時沒仔細看，導致這個問題還困擾了我很久。
意思就是以 / 開頭的會被當做路徑，就不會一直嵌套之前的路徑。
到此這篇關于vue $router和$route的區(qū)別詳解的文章就介紹到這了,更多相關vue $router和$route內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
tdesign-vue是TDesign 適配桌面端的組件庫，適合在 vue 2 技術棧項目中使用，這篇文章主要介紹了vue項目中使用TDesign?,需要的朋友可以參考下2023-04-04
Vue數(shù)據(jù)增刪改查與表單驗證的實現(xiàn)流程介紹
這篇文章主要介紹了Vue數(shù)據(jù)增刪改查與表單驗證的實現(xiàn)，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-10-10
這篇文章主要介紹了通過cordova將vue項目打包為webapp的方法,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-02-02
Vue.js中用webpack合并打包多個組件并實現(xiàn)按需加載
對于現(xiàn)在前端插件的頻繁更新，我也是無力吐槽，但是既然入了前端的坑就得認嘛，所以多多少少要對組件化有點了解，下面這篇文章主要給大家介紹了在Vue.js中用webpack合并打包多個組件并實現(xiàn)按需加載的相關資料，需要的朋友可以參考下。2017-02-02
本文主要介紹了vue實現(xiàn)瀏覽器桌面通知的示例代碼，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-01-01
vue如何使用window.open打開頁面并拼接參數(shù)
這篇文章主要介紹了vue如何使用window.open打開頁面并拼接參數(shù)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
這篇文章主要介紹了vue中el-tree增加節(jié)點后如何重新刷新，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教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
這篇文章主要為大家詳細介紹了Vue實現(xiàn)簡單計算器，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-01-01