13、项目3 - 支持中心开发指南

项目3 - 支持中心开发指南

1. 用户菜单添加

在 NavMenu.vue 文件中，我们要为导航菜单添加与用户相关的功能，让这些功能显示在菜单的最右侧。操作步骤如下：
1. 在已有的路由链接后添加一个 div 元素：

<div class="spacer"></div>

这个元素会利用CSS的flexbox属性占据菜单中的所有可用空间，从而将后续内容推到右侧。
2. 借助之前在集中状态中存储用户信息的插件，我们可以通过 $state 属性访问全局状态。在 NavMenu.vue 组件中添加用户菜单：

<template v-if="$state.user">
  <a>{
  
  { $state.user.username }}</a>
  <a @click="logout">Logout</a>
</template>

3. 如果用户未登录，在上述模板下方添加登录链接：

<router-link v-else :to="{name: 'login'}">Login</router-link>