uniapp的简易导航条

<template>
  <view>
    <view class="navbar">
      <text class="nav-item" @click="navigateToMenu('menu1')">Menu 1</text>
      <text class="nav-item" @click="navigateToMenu('menu2')">Menu 2</text>
    </view>
    <router-view></router-view>
  </view>
</template>

<script>
export default {
  methods: {
    navigateToMenu(menu) {
      uni.navigateTo({
        url: '/pages/' + menu + '/' + menu,
      });
    },
  },
};
</script>

<style>
.navbar {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 60px;
  background-color: #f2f2f2;
}

.nav-item {
  margin: 0 20px;
  font-size: 18px;
  color: #333;
  cursor: pointer;
}
</style>

在这个示例中，我们使用了一个 navbar 容器，在其中放置了两个 nav-item 导航选项。通过 @click 事件监听，当点击导航选项时，会调用 navigateToMenu 方法，并根据传入的参数跳转到不同的页面。在 navigateToMenu 方法中，我们使用 uni.navigateTo 方法来进行页面跳转，通过指定 url 参数来指定跳转的页面路径（例如 /pages/menu1/menu1）。