生活随笔
收集整理的這篇文章主要介紹了
vue2.0 点击跳转传参--vue路由跳转传参数
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
vue中路由跳轉傳參數有多種,自己常用的是下面的幾種
- 通過router-link進行跳轉
- 通過編程導航進行路由跳轉
1. router-link
[html]?view plaincopy
<router-link???????:to="{??????????path:?'yourPath',???????????params:?{???????????????name:?'name',???????????????dataObj:?data??????????},??????????query:?{??????????????name:?'name',???????????????dataObj:?data??????????}??????}">??</router-link>?????1.?path?->?是要跳轉的路由路徑,也可以是路由文件里面配置的?name?值,兩者都可以進行路由導航???2.?params?->?是要傳送的參數,參數可以直接key:value形式傳遞???3.?query?->?是通過?url?來傳遞參數的同樣是key:value形式傳遞?????//?2,3兩點皆可傳遞??
2. $router方式跳轉
[html]?view plaincopy
//?組件?a??<template>??????<button?@click="sendParams">傳遞</button>??</template>??<script>????export?default?{??????name:?'',??????data?()?{????????return?{??????????msg:?'test?message'????????}??????},??????methods:?{????????sendParams?()?{??????????this.$router.push({??????????????path:?'yourPath',???????????????name:?'要跳轉的路徑的?name,在?router?文件夾下的?index.js?文件內找',??????????????params:?{???????????????????name:?'name',???????????????????dataObj:?this.msg??????????????}??????????????/*query:?{??????????????????name:?'name',???????????????????dataObj:?this.msg??????????????}*/??????????})????????}??????},??????computed:?{????????},??????mounted?()?{????????}????}??</script>??<style?scoped></style>??----------------------------------------??//?組件b??<template>??????<h3>msg</h3>??</template>??<script>????export?default?{??????name:?'',??????data?()?{????????return?{??????????msg:?''????????}??????},??????methods:?{????????getParams?()?{??????????//?取到路由帶過來的參數???????????let?routerParams?=?this.$route.params.dataobj??????????//?將數據放在當前組件的數據內??????????this.msg?=?routerParams????????}??????},??????watch:?{??????//?監測路由變化,只要變化了就調用獲取路由參數方法將數據存儲本組件即可????????'$route':?'getParams'??????}????}??</script>??<style?scoped></style>??
總結
以上是生活随笔為你收集整理的vue2.0 点击跳转传参--vue路由跳转传参数的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
