Vue는 다른 ID를 가진 다른 탐색 모음을 얻습니다.

Vue는 완벽한 데이터 바인딩 기능과 배우기 쉬운 구문을 갖춘 단일 페이지 애플리케이션을 구축하기 위한 인기 있는 프런트 엔드 프레임워크입니다. 실제 개발에서는 사용자 ID에 따라 다른 탐색 모음을 로드해야 하는 경우가 많습니다. 이 기사에서는 Vue의 다양한 ID를 기반으로 다양한 탐색 모음을 얻는 기능을 구현하는 방법을 소개합니다.

사전 조건

이 글에서는 여러분이 Vue.js의 기본 사항과 웹팩 패키징 도구에 이미 익숙하다고 가정합니다. 해당 내용에 대해 잘 모르는 경우 관련 강좌를 먼저 수강하는 것이 좋습니다.

요구 사항 확인

코드 작성을 시작하기 전에 요구 사항을 명확히 해야 합니다. 다양한 사용자 ID에 따라 다양한 탐색 모음을 로드합니다. 먼저 탐색 모음 구성 요소를 만든 다음 다양한 사용자 ID를 기반으로 다양한 구성 요소를 로드해야 합니다.

내비게이션 바 구성 요소 만들기

Navigation.vue라는 구성 요소를 만듭니다. 여기서 탐색 바의 스타일과 레이아웃 논리를 정의합니다. 구체적인 코드는 다음과 같습니다.

<template>
  <div>
    <nav>
      <ul>
        <li>
          <router-link to="/">首页</router-link>
        </li>
        <li>
          <router-link to="/products">产品</router-link>
        </li>
        <li>
          <router-link to="/about">关于我们</router-link>
        </li>
        <li v-if="isAdmin">
          <router-link to="/admin">管理后台</router-link>
        </li>
        <li>
          <button @click="logout">退出</button>
        </li>
      </ul>
    </nav>
  </div>
</template>

위 코드에서는 Vue.js의 v-if 지시문을 사용하여 컴포넌트의 표시를 제어합니다. 관리자 백엔드 메뉴는 현재 사용자가 관리자인 경우에만 탐색 모음에 나타납니다. 또한 사용자가 클릭하여 로그아웃할 수 있는 탐색 표시줄에 로그아웃 버튼을 추가했습니다. v-if 指令来控制组件的显示。只有当当前用户是管理员时，管理后台菜单才会显示在导航栏中。此外，我们还将一个退出按钮添加到导航栏中，用户可以通过单击该按钮退出登陆。

获取用户身份

我们需要先获取当前用户的身份信息。在这里，我们使用了一个假数据来代替真实的身份验证逻辑。

// App.vue
 
export default {
  data() {
    return {
      currentUser: {
        username: "test",
        role: "admin"
      }
    };
  },
 
  computed: {
    isAdmin() {
      return this.currentUser.role === "admin";
    }
  }
};

假设当前用户的身份是管理员，通过计算属性 isAdmin 来判断是否为管理员。 如果是管理员，则在导航栏中显示管理后台菜单，否则不显示。

将导航栏组件添加到布局中

最后，我们需要将导航栏组件添加到页面布局中。 在此期间，必须在 router-view 组件外包装 Navigation 组件，如下所示：

<template>
  <div>
    <Navigation />
    <router-view />
  </div>
</template>

当用户访问应用程序中的任何页面时，Navigation

사용자 신원 얻기

먼저 현재 사용자의 신원 정보를 얻어야 합니다. 여기서는 실제 인증 로직 대신 가짜 데이터를 사용합니다.

rrreee

현재 사용자가 관리자라고 가정하고 isAdmin 속성을 ​​계산하여 그가 관리자인지 여부를 확인합니다. 관리자인 경우 네비게이션 바에 관리 배경 메뉴가 표시되며, 그렇지 않은 경우에는 표시되지 않습니다.

레이아웃에 탐색 모음 구성 요소 추가🎜🎜마지막으로 페이지 레이아웃에 탐색 모음 구성 요소를 추가해야 합니다. 그동안 Navigation 구성 요소는 아래와 같이 router-view 구성 요소 외부에 래핑되어야 합니다. 🎜rrreee🎜사용자가 애플리케이션의 페이지를 방문하면 Navigation 구성 요소가 페이지 상단에 나타납니다. 🎜🎜결론🎜🎜이 기사에서는 Vue의 다양한 ID를 기반으로 다양한 탐색 모음을 얻는 방법을 시연했습니다. 먼저 탐색 구성 요소를 만든 다음 사용자의 신원을 기반으로 표시되는 메뉴를 계산합니다. 마지막으로 애플리케이션 레이아웃에 탐색 구성요소를 추가합니다. 🎜🎜실제 개발에서는 실제 필요에 따라 이 문서의 코드를 조정해야 할 수도 있습니다. 그러나 유사한 방법을 사용하여 탐색 모음의 다양한 ID 기능을 쉽게 구현할 수 있으므로 더 나은 사용자 경험을 얻을 수 있습니다. 🎜

위 내용은 Vue는 다른 ID를 가진 다른 탐색 모음을 얻습니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!