在vue3中怎么把登陆页面的用户名通过props传到登陆后的页面上
时间: 2024-05-05 20:16:10 浏览: 188
vue中使用props传值的方法
在登录页面中,可以通过路由跳转时传递参数的方式将用户名传递到登录后的页面上。具体实现步骤如下:
1. 在登录页面中,通过路由跳转时传递参数,示例代码如下:
```javascript
// 在登录成功后,使用 $router.push() 方法跳转到登录后的页面,并将用户名作为参数传递
this.$router.push({ path: '/home', query: { username: this.username }})
```
2. 在登录后的页面(如上例中的 `/home`)中,通过 `$route.query` 对象获取传递过来的用户名,示例代码如下:
```javascript
// 在登录后的页面中,通过 $route.query.username 获取传递过来的用户名
<template>
<div>
<h1>Welcome, {{ $route.query.username }}!</h1>
</div>
</template>
```
这样就可以将登录页面中的用户名通过路由传递到登录后的页面上了。如果需要在多个组件中使用该用户名,可以考虑将其保存在 Vuex 中,以便全局使用。
阅读全文