启用props后,可以通过以下两种方式进行传参。
 
方式一
如果只是传递简单的参数,可用通过动态路径参数进行传参。下面例子为A页面转跳B页面:
 
路由配置
 
const router = new VueRouter({
    routes: [
        { 
            path: '/user/:id', 
            component: User, 
            props: true
       }
   ]})
 
A页面
 
this.$router.push('/usr/123') //注入路由器后才可以使用this.$router
 
B页面
 
const User = {
    props: ['id'],
    template: '<div>User {{ id }}</div>'}
 
方式二
如果只是传递复杂的参数,可用通过此方式进行传参。下面例子为A页面转跳B页面:
 
路由配置
 
const router = new VueRouter({
    routes: [
        { 
            path: '/user', 
            name: 'user'
            component: User, 
            props: true
       }
   ]})
 
A页面
 
this.$router.push({
    name: 'user',
    params: {
    user: {
    name: '小明',
        age: 18,
        gender: '男',
    }
        ...
    }
})
 
B页面
 
const User = {
    props: ['user'],
    template: '<div>姓名: {{ user.name }}</div><div>年龄: {{ user.age }}</div><div>性别: {{ user.gender }}</div>'
}
————————————————