vue-router之路由參數的傳遞

1.普通參數的傳遞

在這裏插入圖片描述
在這裏插入圖片描述
在這裏插入圖片描述
![在這裏插入圖片描述](https://img-blog.csdnimg.cn/20200318140858239.png
首先我們要在路由配置的時候,給我們的參數取個名。方便後面的操作,然後我們要在我們需要進行參數傳遞的這個組件裏面,給它返回一個我們的參數,還有就是我們如果要進行參數傳遞的話是要用v-bind進行綁定的,不然是沒有效果的。最後我們在跳轉的路徑裏面將組件的路徑和我們要傳遞的參數進行拼接就好了。

2.對象參數的傳遞

在這裏插入圖片描述
在這裏插入圖片描述
前面的基本操作和平常的路由配置都是差不多的,最重要的就是在這個v-bind綁定的這裏。首先,我們要進行跳轉,跳到我們要跳轉的組件裏面,所以我們要先寫個path:‘/profile’,然後的話就是傳遞我們的參數了,由於我們要傳遞的是一個對象,所以我們要使用query,然後裏面的就和對象寫法是一樣的。
在這裏插入圖片描述
結果的話就是如上圖。

3.參數的獲取

對於單個參數的獲取我們只需要使用$route.params.userId就可以了。
在這裏插入圖片描述
在這裏插入圖片描述
這是結果。
然後如果我們想要獲取數組裏面的參數的話,也是比較簡單的,按下圖操作就可以了。
在這裏插入圖片描述
在這裏插入圖片描述

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章