【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>