您好,登錄后才能下訂單哦!
本篇文章為大家展示了使用vue router路由傳參刷新頁面參數(shù)丟失如何解決,內容簡明扼要并且容易理解,絕對能使你眼前一亮,通過這篇文章的詳細介紹希望你能有所收獲。
路由配置如下:
{ path: '/detail/:id', //若id后面加?代表這個參數(shù)是可選的 name: 'detail', component: Detail }
通過 $router.push 中 path 攜帶參數(shù)的方式
// 列表中的傳參 goDetail(row) { this.$router.push({ path: `/detail/${row.id}` }) } // 詳情頁獲取參數(shù) this.$route.params.id
通過 $router.push 的 params 傳參
// 列表頁傳參 goDetail(row) { this.$router.push({ name: 'detail', params: { id: row.id } }) } // 詳情頁獲取 this.$route.params.id
注:這種方式的傳參,路徑用 name,路徑用 name,路徑用 name , 用 path 會獲取不到;如果在路由配置中沒有添加 /:id即 path: 'detail',url 中不會顯示 id,在詳情頁還是可以拿到參數(shù) id,但刷新后參數(shù)丟失。
以上這兩種方式,傳遞的參數(shù) id 會在 url 后面顯示,如圖:
傳遞的參數(shù)會暴露在網(wǎng)址中。
如果在路由中設置了params參數(shù) /:id,但是在跳轉的時候沒有傳遞參數(shù),會導致頁面沒有內容或跳轉失敗,可在后面加 ?代表這個參數(shù)是可選的,即 /:id?
// 路由配置 { path: '/detail', name: 'detail', component: Detail } // 列表頁 goDetail(row) { this.$router.push({ path: '/detail', query: { id: row.id } }) } // 詳情頁 this.$route.query.id
注:這種方式傳遞的參數(shù)會在地址欄的 url 后面顯示 ?id=?,類似于 get 傳參;query 必須配合 path 來傳參。
傳遞的參數(shù)是對象或數(shù)組
還有一種情況就是,如果通過 query 的方式傳遞對象或數(shù)組,在地址欄中會被強制轉換成 [object Object],刷新后也獲取不到對象值。
此時可以通過 JSON.stringify() 方法將要傳遞的參數(shù)轉換為字符串傳遞,在詳情頁再通過 JSON.parse() 轉換成對象。
let parObj = JSON.stringify(obj) this.$router.push({ path: '/detail', query: { 'obj': parObj } }) // 詳情頁 JSON.parse(this.$route.query.obj)
這個方法雖然可以傳遞對象,若數(shù)據(jù)少還好,數(shù)據(jù)多的話地址欄就很長了
注意:在所有的子組件中獲取路由參數(shù)是 $route不是 $router
以上 params 和 query 傳參方式對比:
通過 $router.push 的 params + name 傳參,若路由中沒有設置params參數(shù),參數(shù)不會拼接在路由后面,但是頁面刷新參數(shù)會丟失。
通過 $router.push 中 path 攜帶參數(shù)或通過 query 傳參,參數(shù)會拼接在地址后面,會暴露信息。
// 路由配置 { path: '/detail/:id', name: 'detail', component: Detail, props: true // 如果props設置為true,$route.params將被設置為組件屬性 } // 列表頁 goDetail(row) { this.$router.push({ path: '/detail', query: { id: row.id } }) } // 詳情頁 export default { props: { // 將路由中傳遞的參數(shù)id解耦到組件的props屬性上 id: String }, mounted: { console.log(this.id) } }
Vue是一款友好的、多用途且高性能的JavaScript框架,使用vue可以創(chuàng)建可維護性和可測試性更強的代碼庫,Vue允許可以將一個網(wǎng)頁分割成可復用的組件,每個組件都包含屬于自己的HTML、CSS、JavaScript,以用來渲染網(wǎng)頁中相應的地方,所以越來越多的前端開發(fā)者使用vue。
上述內容就是使用vue router路由傳參刷新頁面參數(shù)丟失如何解決,你們學到知識或技能了嗎?如果還想學到更多技能或者豐富自己的知識儲備,歡迎關注億速云行業(yè)資訊頻道。
免責聲明:本站發(fā)布的內容(圖片、視頻和文字)以原創(chuàng)、轉載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權內容。