路由组件传递参数

1.props的值为布尔类型

 

const User={

　　props:['id'],        //使用 props 接收路由参数

　　template:'<div>用户ID: {{ id }} </div>'        //使用路由参数

}

 

const router=new VueRouter({

　　routes:[

　　//如果 props 被设置为 true，route.params 将会被设置为组件属性

　　　　{ path : '/user/:id' , component : User, props:true }

　　]

})

 

2.props的值为对象类型------id废了，获取不到

const User={

　　props: [' uname ' , ' age '],

　　template:'<h1>用户id为 {{ uname + "------" + age }}</h1>'

}

 

const router = new VueRouter({

　　{path:'/user/:id',component:User, props: { uname : 'lisi' , age : 12 } }

})

 

3.props的值为函数类型-------组合型，既可以获取uname，age，也可以获取id

const User={

　　props:['uname','age','id'],

　　template:'<div>用户信息：{{uname + "----" + age + "-----" + id }}</div>'

}

 

const router = new VueRouter({

　　routes:[

　　　　{ path:'/user',

　　        component:User,

              props : route=>({ uname : 'zs' , age : 12 , id : route.params.id })

　　　　}

　　]

 

})