vue3 自定义导航栏

自定义导航栏是Vue3中的一个常见需求。通过自定义导航栏，你可以根据项目的需要添加不同的导航链接、搜索栏、用户头像等功能。在Vue3中，你可以使用Vue Router来实现导航栏标题的选中效果。

下面是一个简单的示例代码，展示了如何使用Vue3自定义导航栏：

<template>
  <div class="navbar">
    <div class="logo">Logo</div>
    <div class="nav-links">
      <router-link to="/" class="nav-link" :class="{ active: currentRoute === '/' }">Home</router-link>
      <router-link to="/about" class="nav-link" :class="{ active: currentRoute === '/about' }">About</router-link>
      <router-link to="/contact" class="nav-link" :class="{ active: currentRoute === '/contact' }">Contact</router-link>
    </div>
    <div class="search-bar">
      <!-- Search bar code here -->
    </div>
    <div class="user-avatar">
      <!-- User avatar code here -->
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentRoute: '/',
    };
  },
  created() {
    this.currentRoute = this.$route.path;
  },
};
</script>

<style>
/* CSS styles for the navbar */
</style>

在这个示例中，我们使用了Vue Router的`router-link`组件来创建导航链接。通过`currentRoute`变量和`:class`指令，我们可以根据当前路由的路径来判断哪个导航链接是选中状态。

注意：这只是一个示例，你可以根据项目的需求进行相应的修改和定制。