vue3用户登录之后导航栏显示用户名
时间: 2023-08-02 20:15:44 浏览: 134
要实现这个功能,你可以在用户登录成功后,在前端使用Vue3的状态管理工具(如Vuex)保存用户信息,然后在导航栏组件中读取保存的用户信息并显示用户名。以下是一个示例代码:
在登录成功后,将用户信息保存到Vuex中:
```javascript
import { createStore } from 'vuex'
const store = createStore({
state() {
return {
user: null
}
},
mutations: {
setUser(state, user) {
state.user = user
}
}
})
// 在登录成功后调用此方法保存用户信息
store.commit('setUser', {
name: 'John Doe',
// 其他用户信息
})
```
在导航栏组件中读取保存的用户信息并显示用户名:
```html
<template>
<nav>
<ul>
<li><router-link to="/">Home</router-link></li>
<li><router-link to="/about">About</router-link></li>
<li v-if="user">{{ user.name }}</li>
<li v-else><router-link to="/login">Login</router-link></li>
</ul>
</nav>
</template>
<script>
import { useStore } from 'vuex'
export default {
computed: {
user() {
return this.$store.state.user
}
}
}
</script>
```
在上面的示例中,`computed` 属性中的 `user` 计算属性会从Vuex中读取保存的用户信息,并根据是否存在用户信息来显示不同的内容。