vue做一个移动端导航条，实现首页，发现，商城，我的四个页面

在Vue.js中制作一个简单的移动端导航栏，通常我们会使用`vue-router`配合一些轻量级的UI组件库，如`vant`或者`Element Plus`。以下是创建这个导航栏的基本步骤：

1. 安装依赖：
- `npm install vue-router vant el-menu`

2. 导入所需的模块并配置路由：

// router/index.js
import Vue from 'vue'
import Router from 'vue-router'
import Home from './views/Home.vue'
import Discover from './views/Discover.vue'
import Shop from './views/Shop.vue'
import Profile from './views/Profile.vue'

Vue.use(Router)

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home,
  },
  {
    path: '/discover',
    name: 'Discover',
    component: Discover,
  },
  {
    path: '/shop',
    name: 'Shop',
    component: Shop,
  },
  {
    path: '/profile',
    name: 'Profile',
    component: Profile,
  }
]

const router = new Router({
  routes,
  mode: 'history', // 对于Vue 2.x，如果在非SPA环境下，需要设置模式为hash
})

export default router

3. 在`App.vue`或布局文件中设置导航栏：

<template>
  <div id="app">
    <el-menu :default-active="$route.path" class="navbar">
      <el-menu-item index="/">首页</el-menu-item>
      <el-menu-item index="/discover">发现</el-menu-item>
      <el-menu-item index="/shop">商城</el-menu-item>
      <el-menu-item index="/profile">我的</el-menu-item>
    </el-menu>
    <router-view></router-view>
  </div>
</template>

<script>
import ElMenu from "element-plus/lib/menu";
import { useRouter } from 'vue-router';

export default {
  components: {
    ElMenu
  },
  setup() {
    const router = useRouter();
    return () => ({
      router
    });
  }
};
</script>

这里的`el-menu-item`标签代表每个菜单项，`index`属性对应路由的路径名。