vue路由跳轉怎么實現參數傳遞與接收

這篇文章主要介紹“vue路由跳轉怎么實現參數傳遞與接收”的相關知識，小編通過實際案例向大家展示操作過程，操作方法簡單快捷，實用性強，希望這篇“vue路由跳轉怎么實現參數傳遞與接收”文章能幫助大家解決問題。

路由跳轉

1.聲明式路由跳轉

（不帶參數）

通過router-link標簽進行跳轉，使用name或者path都可以，在dom結構中會被渲染成a標簽
注意：router-link中鏈接如果是’/‘開始就是從根路由開始，如果開始不帶’/’，則從當前路由開始。

     <router-link :to="{name:'home'}"> 
	 <router-link :to="{path:'/home'}">

（帶參數）

注意：
params傳參數 (類似post)
路由配置 path: "/home/:id"
不配置path，路由跳轉可請求，刷新頁面傳遞的參數會丟失，
配置path，刷新也買你id會被保留

<router-link :to="{name:'home', params: {id:1}}">

<router-link :to="{name:'home', query: {id:1}}">

獲取路由跳轉傳遞的參數：
html 通過 $route.params.id， script 通過this.$route.params.id

2.編程式路由跳轉

1.字符串形式

router.push('home')

2.對象形式

router.push({ path: 'home' })router.push({ name: 'user'})

3.函數內調用
（不帶參數）

this.$router.push('/home')this.$router.push({name:'home'})this.$router.push({path:'/home'})

（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
（params傳參）
只可以使用name

this.$router.push({name:'home',params: {id:'1'}})

html 取參$route.params.id， script 取參this.$route.params.id

3.query和params的區別

query類似 get, 跳轉之后頁面 url后面會拼接參數,類似?id=1, 非重要性的可以這樣傳, 密碼之類還是用params刷新頁面id還在

params類似 post, 跳轉之后頁面 url后面不會拼接參數 , 但是刷新頁面id 會消失

關于“vue路由跳轉怎么實現參數傳遞與接收”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識，可以關注億速云行業資訊頻道，小編每天都會為大家更新不同的知識點。