在vue3中怎么把登陆页面的用户名通过props传到登陆后的页面上,而且登陆页面是单独一页
时间: 2023-11-17 15:05:52 浏览: 208
在Vue 3中,可以使用路由传参的方式将登陆页面的用户名传递到登陆后的页面上。
首先,在登陆页面组件中,可以使用路由的`push`方法将用户名作为参数传递到下一个页面:
```javascript
// Login.vue
methods: {
login() {
// 登陆成功后跳转到下一个页面,并传递用户名参数
this.$router.push({ path: '/home', query: { username: this.username } })
}
}
```
然后,在下一个页面组件中,可以通过`$route`对象的`query`属性获取到传递的参数:
```javascript
// Home.vue
mounted() {
// 获取传递的用户名参数
const username = this.$route.query.username
console.log(username) // 输出传递的用户名
}
```
这样就可以将登陆页面的用户名通过路由传递到下一个页面了。如果需要在多个页面中共享该用户名,可以考虑将其存储在全局状态管理中,如Vuex。
阅读全文