導(dǎo)讀Vue路由傳參的兩種方式query和params點(diǎn)擊打開(kāi)視頻講解更加詳細(xì)【面試題】Vue路由傳參的兩種方式query和params_嗶哩嗶哩_bilibil....Vue路由傳參的兩種方式query和params

點(diǎn)擊打開(kāi)視頻講解更加詳細(xì)

【面試題】Vue路由傳參的兩種方式query和params_嗶哩嗶哩_bilibili

一、router-link

1. 不帶參數(shù)<router-link :to="{name:home}"> <router-link :to="{path:/home}"> //name,path都行, 建議用name // 注意：router-link中鏈接如果是/開(kāi)始就是從根路由開(kāi)始，如果開(kāi)始不帶/，則從當(dāng)前路由開(kāi)始。2.帶參數(shù)<router-link :to="{name:home, params: {id:1}}"> // params傳參數(shù) (類似post)// 路由配置 path: "/home/:id" 或者 path: "/home:id" // 不配置path ,第一次可請(qǐng)求,刷新頁(yè)面id會(huì)消失// 配置path,刷新頁(yè)面id會(huì)保留// html 取參 $route.params.id// script 取參 this.$route.params.id<router-link :to="{name:home, query: {id:1}}"> // query傳參數(shù) (類似get,url后面會(huì)顯示參數(shù))// 路由可不配置// html 取參 $route.query.id// script 取參 this.$route.query.id

二、 this.$router.push()

1. 不帶參數(shù) this.$router.push(/home)this.$router.push({name:home})this.$router.push({path:/home})2. query傳參 this.$router.push({name:home,query: {id:1}})this.$router.push({path:/home,query: {id:1}})// html 取參 $route.query.id// script 取參 this.$route.query.id 3. params傳參 this.$router.push({name:home,params: {id:1}}) // 只能用 name // 路由配置 path: "/home/:id" 或者 path: "/home:id" ,// 不配置path ,第一次可請(qǐng)求,刷新頁(yè)面id會(huì)消失// 配置path,刷新頁(yè)面id會(huì)保留 // html 取參 $route.params.id// script 取參 this.$route.params.id

三、 this.$router.replace() (用法同上,push)四、query和params區(qū)別與總結(jié)：

- query相當(dāng)于GET請(qǐng)求，頁(yè)面跳轉(zhuǎn)的時(shí)候，可以在地址欄看到請(qǐng)求參數(shù)

- params相當(dāng)于POST請(qǐng)求，參數(shù)不會(huì)在地址欄中顯示

- query類似 get, 跳轉(zhuǎn)之后頁(yè)面 url后面會(huì)拼接參數(shù),類似?id=1, 非重要性的可以這樣傳, 密碼之類還是用params刷新頁(yè)面id還在

- params類似 post, 跳轉(zhuǎn)之后頁(yè)面 url后面不會(huì)拼接參數(shù) , 但是刷新頁(yè)面id 會(huì)消失

若對(duì)您有幫助，請(qǐng)點(diǎn)擊跳轉(zhuǎn)到B站一鍵三連哦！感謝支持?。?！

【面試題】Vue路由傳參的兩種方式query和params_嗶哩嗶哩_bilibili