關於Vue中兩個vue頁面傳數據

一個vue頁面路由跳轉到另一個vue頁面想要獲得前一個頁面的數據的方法：路由傳參

路由傳參方法適用於：

1：在A頁面獲得數據提交給B頁面 / 將A頁面的數據給B頁面

2：A頁面中點擊按鈕跳轉到B頁面，B頁面需要使用A頁面中的數據

---

 

Vuex和本地緩存的方法就不講了

問題：為什么使用這種方法？

答：在A頁面點擊按鈕路由跳轉到B頁面了，但是我在B頁面還需要A頁面中的數據

　　

這是數據：
data: 'chalk'

這是router/index.js中的兩個路由地址：
{ path: '/theme', name: 'theme', component: Theme }，
{ path: '/theme/:id', name: 'themeedit', component: ThemeEdit }

這是固定路由地址:
{ path: '/theme/themeedit', name: 'themeedit', component: ThemeEdit }

　　

用法解答：

第一種用法：

A頁面利用： this.$router.push({ path: `/theme/${this.data}` })    獲得你想要的數據

利用橋梁（路由地址）：{ path: '/theme/:id', name: 'theme', component: ThemeEdit }

B頁面可以通過：  $route.params.id  獲取數據

例如：內容中利用插槽表達式 {{ $route.params.id }}

或者賦值給私有數據：this.data = this.$route.params.id

 

但是，路由地址會帶有數據,此時頁面地址為: http://localhost:8080/#/theme/chalk

第二種用法：

A頁面利用： this.$router.push({ name: 'themeedit', params: { id: this.data } })

利用橋梁（路由地址）：{ path: '/theme/themeedit', name: 'themeedit', component: ThemeEdit }

B頁面數據獲取方式和上面相同

此時頁面路由地址固定為：http://localhost:8080/#/theme/themeedit

B頁面中更多數據獲取方法參考：$router的耦合與解耦

 

建議用規定之內的方法傳參，參考：Vue編程式導航