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