這篇文章主要介紹了關於透過Vue屬性$route的params傳參,有著一定的參考價值,現在分享給大家,有需要的朋友可以參考一下
vue傳值與vue傳參是兩塊東西
#vue傳參的原理主要在於Vue.$route.params (也有$route.query)
$route是Vue的屬性,params是$route的屬性,用來儲存資料的鍵值對(物件形式,{key:value}),儲存很多屬性(鍵值對,屬性,屬性值)在裡面.清單:#透過瀏覽器插件vue devtools(vue 開發者工具插件)可以看的到$route屬性內部的具體資料:
$route.params,**可以說於$route是一個中間容器**,用來容納參數,是鍵值對的方式,這樣在這個頁面執行動作傳遞參數到$route.params,在另外一個頁面就能從$route.params裡拿參數,就這麼回事. 在路由裡定義
//router >> index.js { path: '/Page9/:abc/:cde', name: 'Page9', component: Page9 }
而屬性值則由點擊路由後觸發路徑的變化來決定具體的值.要傳輸什麼就寫什麼,比如
//App.vue <router-link> 点击就跳转到page9,并同时传参到Vue.$route.params </router-link>
//Page9.vue <template> <p> </p> <h1>{{ msg }}</h1> <p>{{this.$route.params}}</p> <h3>拿数据</h3> </template> <script> export default{ name:'Page9', data(){ return{ msg:'I am Page9.vue' } }, methods:{ nsj(){ this.msg = this.$route.params.asd } } } </script>
意思是最後Vue.$route.params會儲存{ "abc" : "gigi" ,"cde" : "lkjdk7338"}
html:
<p><button>点击就跳转到page9,并同时传参到</button></p>
js:
sj1() { this.$router.push({ path: '/Page9', name: 'Page9', params: { abc: this.mydata, cde: 'dlj' } })
意思是最後Vue.$route.params會儲存{"abc" : this.mydata這個資料,"cde" : ' 'dlj''}
如何拿值:這就很簡單了:直接從Vue.$route.params裡拿就行了
{{ $route.params.abc }} --> "gigi" 或this.mydata具體的值
{{ $route.params.abc }} --> " lkjdk7338 "以上就是本文的全部內容,希望對大家的學習有幫助,更多相關內容請關注PHP中文網!
###相關推薦:#########vue-router nginx非根路徑的設定方法###############vue如何解決addRoutes動態新增路由後刷新失效的問題######以上是透過Vue屬性$route的params傳參的詳細內容。更多資訊請關注PHP中文網其他相關文章!