您好,登錄后才能下訂單哦!
這篇文章主要介紹“vue-router傳參的方式有哪些及怎么實現(xiàn)”,在日常操作中,相信很多人在vue-router傳參的方式有哪些及怎么實現(xiàn)問題上存在疑惑,小編查閱了各式資料,整理出簡單好用的操作方法,希望對大家解答”vue-router傳參的方式有哪些及怎么實現(xiàn)”的疑惑有所幫助!接下來,請跟著小編一起來學(xué)習(xí)吧!
Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成,讓構(gòu)建單頁面應(yīng)用變得易如反掌。包含的功能有:
嵌套的路由/視圖表
模塊化的、基于組件的路由配置
路由參數(shù)、查詢、通配符
基于 Vue.js 過渡系統(tǒng)的視圖過渡效果
細(xì)粒度的導(dǎo)航控制
帶有自動激活的 CSS class 的鏈接
HTML5 歷史模式或 hash 模式,在 IE9 中自動降級
自定義的滾動條行為
vue-router傳參兩種方式:params和query
params、query是什么?
params:/router1/:id ,/router1/123,/router1/789 ,這里的id叫做params
query:/router1?id=123 ,/router1?id=456 ,這里的id叫做query。
方法1:
query 方式傳參和接收參數(shù)
傳參:
this.$router.push({ path:'/openAccount', query:{id:id} });
接收參數(shù):
this.$route.query.id
注意:傳參是this.$router,接收參數(shù)是this.$route
兩者區(qū)別:
$router為VueRouter實例,想要導(dǎo)航到不同URL,則使用$router.push方法
$route為當(dāng)前router跳轉(zhuǎn)對象,里面可以獲取name、path、query、params等
方法2:
params方式傳參和接收參數(shù)
傳參:
this.$router.push({ name:'/openAccount', params:{ id: id } })
接收參數(shù): this.$route.params.id
注意:params傳參,push里面只能是 name:'xxxx',不能是path:'/xxx',因為params只能用name來引入路由,如果這里寫成了path,接收參數(shù)頁面會是undefined?。?!
二者還有點(diǎn)區(qū)別,可以理解為:query相當(dāng)于get請求,頁面跳轉(zhuǎn)的時候,可以在地址欄看到請求參數(shù),而params相當(dāng)于post請求,參數(shù)不會再地址欄中顯示
router.js
export default new Router({ routes: [ { path: '/', name: 'login', component: Login }, { path: '/register', name: 'register', component: Register } })
組件(傳參):
<template> <div class="hello"> <h2>{{ msg }}</h2> <button @click="routerTo">click here to news page</button> </div> </template> <script> export default { name: 'HelloWorld', data () { return { msg: 'Welcome to Your Vue.js App' } }, methods:{ routerTo(){ this.$router.push({ name: 'register', params: { userId: 123 }});//params方式 這里的name值是在定義route.js時中的name //this.$router.push({ path: '/register', query: { userId: 123 }}); //query方式 } } } </script> <style> </style>
組件(接收參數(shù))
<template> <div> {{this.$route.params.userId}}或者{{this.$route.params.userId}} </div> </template> <script> </script>
Vue是一套用于構(gòu)建用戶界面的漸進(jìn)式JavaScript框架,Vue與其它大型框架的區(qū)別是,使用Vue可以自底向上逐層應(yīng)用,其核心庫只關(guān)注視圖層,方便與第三方庫和項目整合,且使用Vue可以采用單文件組件和Vue生態(tài)系統(tǒng)支持的庫開發(fā)復(fù)雜的單頁應(yīng)用。
到此,關(guān)于“vue-router傳參的方式有哪些及怎么實現(xiàn)”的學(xué)習(xí)就結(jié)束了,希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學(xué)習(xí),快去試試吧!若想繼續(xù)學(xué)習(xí)更多相關(guān)知識,請繼續(xù)關(guān)注億速云網(wǎng)站,小編會繼續(xù)努力為大家?guī)砀鄬嵱玫奈恼拢?/p>
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。