詳解vue-router傳參的兩種方式
Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，讓構(gòu)建單頁(yè)面應(yīng)用變得易如反掌。包含的功能有：
- 嵌套的路由/視圖表
- 模塊化的、基于組件的路由配置
- 路由參數(shù)、查詢、通配符
- 基于 Vue.js 過渡系統(tǒng)的視圖過渡效果
- 細(xì)粒度的導(dǎo)航控制
- 帶有自動(dòng)激活的 CSS class 的鏈接
- HTML5 歷史模式或 hash 模式，在 IE9 中自動(dòng)降級(jí)
- 自定義的滾動(dòng)條行為
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實(shí)例，想要導(dǎo)航到不同URL，則使用$router.push方法
$route為當(dāng)前router跳轉(zhuǎn)對(duì)象，里面可以獲取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',因?yàn)閜arams只能用name來引入路由，如果這里寫成了path，接收參數(shù)頁(yè)面會(huì)是undefined?。?！
二者還有點(diǎn)區(qū)別，可以理解為：query相當(dāng)于get請(qǐng)求，頁(yè)面跳轉(zhuǎn)的時(shí)候，可以在地址欄看到請(qǐng)求參數(shù)，而params相當(dāng)于post請(qǐng)求，參數(shù)不會(huì)再地址欄中顯示
router.js
export default new Router({
routes: [
{
path: '/',
name: 'login',
component: Login
},
{
path: '/register',
name: 'register',
component: Register
}
})
組件（傳參）：
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<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時(shí)中的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>
總結(jié)
以上所述是小編給大家介紹的vue-router傳參的兩種方式，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
相關(guān)文章
element-ui 插槽自定義樣式居中效果實(shí)現(xiàn)思路
這篇文章主要介紹了element-ui 插槽自定義樣式居中效果,簡(jiǎn)單來講實(shí)現(xiàn)思路是通過template標(biāo)簽可理解為一個(gè)內(nèi)嵌組件,寬高重新定義,可在自定義內(nèi)容外層套一層盒子,讓盒子占滿所有空間,再使用flex讓內(nèi)部元素居中,需要的朋友可以參考下2024-07-07
vant的Loading加載動(dòng)畫組件的使用(通過接口拿數(shù)據(jù)時(shí)顯示加載狀態(tài))
這篇文章主要介紹了vant的Loading加載動(dòng)畫組件的使用,通過接口拿數(shù)據(jù)時(shí)顯示加載狀態(tài),本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2024-01-01
基于 Vue.js 2.0 酷炫自適應(yīng)背景視頻登錄頁(yè)面實(shí)現(xiàn)方式
本文講述如何實(shí)現(xiàn)擁有酷炫背景視頻的登錄頁(yè)面，瀏覽器窗口隨意拉伸，背景視頻及前景登錄組件均能完美適配，背景視頻可始終鋪滿窗口，前景組件始終居中，視頻的內(nèi)容始終得到最大限度的保留，可以得到最好的視覺效果2018-01-01
簡(jiǎn)單談?wù)刅ue3中的ref和reactive
vue3中實(shí)現(xiàn)響應(yīng)式數(shù)據(jù)的方法是就是使用ref和reactive,所謂響應(yīng)式就是界面和數(shù)據(jù)同步,能實(shí)現(xiàn)實(shí)時(shí)更新,下面這篇文章主要給大家介紹了關(guān)于Vue3中ref和reactive的相關(guān)資料,需要的朋友可以參考下2023-04-04
最近在學(xué)習(xí)Three.js相關(guān)的技術(shù),恰逢Vue 3.0正式版也已推出,下面這篇文章主要給大家介紹了關(guān)于vue3項(xiàng)目中使用three.js的操作步驟,文中通過圖文以及實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-01-01
WebStorm啟動(dòng)vue項(xiàng)目報(bào)錯(cuò)代碼:1080?throw?err解決辦法
在使用webstorm新建vue項(xiàng)目時(shí)常會(huì)遇到一些報(bào)錯(cuò),下面這篇文章主要給大家介紹了關(guān)于WebStorm啟動(dòng)vue項(xiàng)目報(bào)錯(cuò)代碼:1080?throw?err的解決辦法,文中將解決辦法介紹的非常詳細(xì),需要的朋友可以參考下2023-12-12
vue中promise的使用及異步請(qǐng)求數(shù)據(jù)的方法
這篇文章主要介紹了vue中promise的使用及異步請(qǐng)求數(shù)據(jù)的方法,文章給大家較詳細(xì)的介紹了遇到的問題及解決方法，需要的朋友可以參考下2018-11-11
vue3+ts+pinia+vant項(xiàng)目搭建詳細(xì)步驟
最近公司想重構(gòu)一個(gè)項(xiàng)目,這里給大家總結(jié)下,這篇文章主要給大家介紹了關(guān)于vue3+ts+pinia+vant項(xiàng)目搭建的詳細(xì)步驟,文中通過圖文及代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-09-09
這篇文章主要介紹了Vue使用zTree插件封裝樹組件操作,結(jié)合實(shí)例形式分析了vue.js整合zTree插件實(shí)現(xiàn)樹組件與使用相關(guān)操作技巧,需要的朋友可以參考下2019-04-04
vue實(shí)現(xiàn)兩個(gè)區(qū)域滾動(dòng)條同步滾動(dòng)
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)兩個(gè)區(qū)域滾動(dòng)條同步滾動(dòng)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-12-12