启用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>'
}
————————————————
智一面|前端面试必备练习题