Vue路由傳遞query參數(shù)兩種方式

更新時間：2023年06月05日 08:37:39 作者：小花皮豬

路由是可以傳遞參數(shù)的，一般使用query進行傳參，有兩種方式，本溫酒通過代碼示例給大家介紹這兩種傳遞方式，感興趣的小伙伴可以參考閱讀

路由傳遞query參數(shù)兩種方式

路由是可以傳遞參數(shù)的，一般使用query進行傳參，有兩種方式，接下來一一展示

1 案例展示

先編寫一個簡單的案例

我這里用的一個三級路由

這里使用三級路由以及展示路由視圖

這樣點擊就跳轉對應的路徑了，接下來進行路由跳轉的時候傳參即可

2 路由傳參

路由可以傳遞兩種參數(shù)形式，一種是query字符串形式參數(shù)，一種是對象形式參數(shù)，下面進行說明

方式1：字符串傳參(不推薦)

參數(shù)和ajax或axios發(fā)送的query參數(shù)幾乎一致,寫法基本和和ajax一致，都是 url?key=value&拼接參數(shù)的格式，例如：

<router-link to="/home/message/detail?id=1&title=你好">

路徑上也會有所體現(xiàn)

傳遞完的參數(shù)就到$route的query里面，這里我在組件掛載的時候輸出了一個vc實例

可以在$route的query里面找到參數(shù)

接收路由參數(shù)

想要接收使用參數(shù)，也直接從$route的query里面獲取即可

但是現(xiàn)在參數(shù)是死的，所以需要從表達式里面?zhèn)鬟f

表達式錯誤傳參

注意，在使用到表達式傳參的場景時，切不可使用下面兩種傳遞方式

這樣就會直接當前字符串解析

也不可以直接使用:to的方式，這樣會解析成一個表達式，無法識別報錯

表達式正確傳參

正確的做法應該是加上``并且使用$進行拼接傳遞

<!-- 跳轉路由并攜帶query參數(shù) to的字符串寫法 -->
   <router-link :to="`/home/message/detail?id=${msg.id}&title=${msg.title}`">{{msg.title}}</router-link>

接收參數(shù)還是從$route的query里面獲取，這樣就可以完成使用query方式參數(shù)

但是query這種拼接方式有些復雜，所以有了第二種傳參方式，使用對象傳參

方式2：對象傳參(推薦)

對象方式進行傳參，既然現(xiàn)在to是一個對象，那么有幾個屬性可以使用

path:想去哪里跳轉

query:它是一個對象，在對象里面配置參數(shù)

 <!-- 跳轉路由并攜帶query參數(shù) to的對象寫法 -->
 <router-link :to="{
         path:'/home/message/detail',
          query:{id:msg.id,title:msg.title}
 }">

這種寫法清晰明了，推薦使用

3 總結

1 傳遞參數(shù)

<!-- 跳轉并攜帶query參數(shù)，to的字符串寫法 -->
<router-link :to="/home/message/detail?id=666&title=你好">跳轉</router-link>
<!-- 跳轉并攜帶query參數(shù)，to的對象寫法 -->
<router-link 
        :to="{
                path:'/home/message/detail',
                query:{
                   id:666,
            title:'你好'
                }
        }"
>跳轉</router-link>

2 接收參數(shù)