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