举一个beforRouterEnter使用的例子
时间: 2024-05-09 20:15:08 浏览: 94
`beforeRouteEnter` 是 Vue Router 中一个导航守卫,用于在路由进入之前执行一些逻辑操作。以下是一个使用 `beforeRouteEnter` 的例子:
```
const router = new VueRouter({
routes: [
{
path: '/users/:id',
component: User,
beforeEnter: (to, from, next) => {
// 获取用户 id
const userId = to.params.id
// 执行异步操作,如获取用户信息
getUserInfo(userId).then(userInfo => {
// 将用户信息传递给组件的 props
to.meta.userInfo = userInfo
next()
}).catch(error => {
// 处理错误情况
next('/error')
})
}
}
]
})
const User = {
props: ['userInfo'],
created() {
// 使用传递的用户信息进行组件初始化
console.log(this.userInfo)
},
template: '<div>User info: {{ userInfo }}</div>'
}
```
在上面的例子中,当进入 `/users/:id` 路径时,会执行 `beforeEnter` 函数中的逻辑。其中,我们通过异步操作获取了用户信息,并将其作为路由元信息传递给组件。
在组件中,我们可以通过 `props` 接收到传递的用户信息,并在 `created` 钩子中使用它进行组件的初始化。
阅读全文