溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
最近項目中涉及到跨頁面傳參數和后臺進行數據交互，看到需求之后第一反應就是用路由傳參來解決；Vue中給我們提供了三種路由傳參方式，下面我們一個一個的來看一下：
方法一：params傳參：
this.$router.push({
name:"admin",
//這里的params是一個對象，id是屬性名，item.id是值(可以從當前組件或者Vue實例上直接取)
params:{id:item.id}
})
//這個組件對應的路由配置
{
//組件路徑
path: '/admin',
//組件別名
name: 'admin',
//組件名
component: Admin,
}
通過params傳遞參數，如果我們想獲取id的 參數值，我們可以通過this.$route.params.id這種方式來打印出來就可以得到了；（注意：獲取參數的時候是$route，跳轉和傳參的時候是$router）
方法二：路由屬性配置傳參：
this.$router.push({
name:"/admin/${item.id}",
})
//這個組件對應的路由配置
{
//組件路徑
path: '/admin:id',
//組件別名
name: 'admin',
//組件名
component: Admin,
}
通過路由屬性配置傳參我們可以用this.$route.params.id來獲取到id的值，注意this.$router.push方法里面路徑帶的是值，路由配置項那里帶的是變量名(屬性名)來實現的對應；
以上兩種傳參方式基本上可以理解為ajax中的post請求方式，參數都是不可見的，但是上面兩種方法都有一個弊端，就是當頁面刷新了是獲取不到參數值的，那么有沒有一種方法是頁面刷新之后參數依然存在呢？
方法三：query傳參
this.$router.push({
name:"/admin",
query:{id：item.id}
})
//這個組件對應的路由配置
{
//組件路徑
path: '/admin',
//組件別名
name: 'admin',
//組件名
component: Admin,
}
第三種方式是用query來傳參，這種方式是可以解決頁面刷新參數消失問題的，這種方式可以理解為是ajax中的get方法，參數是直接在url后面添加的，參數是可見的，所以解決頁面刷新參數消失問題建議使用方法三來解決；
其實解決頁面刷新參數丟失問題的方案還有很多，比如把參數存在sessionStorange或者localStorange中都是可行的，不過我們既然用vue框架，就要用vue的方式來解決問題。這里只是想告訴大家，問題的解決方案可以多種多樣，要學會用多種方式或者說多種方案來解決一個問題，不要有太多的局限性！
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
