【vue】兩個頁面間傳參 - props

目錄

• Step1 設置可以 props 傳遞數據
• Step2 跳轉前頁面中傳遞數據
• Step3 跳轉后的頁面接收數據

從 A 頁面跳轉到 B 頁面， 參數/數據通過 props 傳遞到 B 頁面，這種方法，不會將參數/數據顯示在 url 中。

這里的例子是從 before 頁面跳轉到 after 頁面，傳遞的數據是 {id: '這是傳遞的數據'}

Step1 設置可以 props 傳遞數據

在路由文件 router/index.js 中，設置 props=true 。

// 引入相關頁面
import Before from '../pages/Before'
import After from '../pages/After'

export default new Router({
  mode: 'history',
  routes: [
    {   path: '/before', name: 'before', component: Before, props: true   },
    {   path: '/after', name: 'after', component: After, props: true    },
  ]
})

Step2 跳轉前頁面中傳遞數據

this.$router.push({ name:'after', params: { id: '這是傳遞的數據' }	});

通過路由跳轉到 details 頁面，跳轉后的路由名稱是 details （在路由文件 index.js 中設置的 name），傳遞的數據放在 params 中。

Step3 跳轉后的頁面接收數據

在跳轉后的頁面 after 頁面中接收 before 頁面傳遞的數據。通過 props 接收數據，接收后賦值給本頁面的變量，以便之后使用數據。

<template>
    <div class="after">
       {{afterID}}
    </div>
</template>

<script>
    export default {
        name: "Details",
        props: ['id'],
        data() {
            return {
                afterID: this.id,
            }
        },
        methods: {
            console.log("id ==> ", this.articleID);
    }
</script>