使用vue+elementui实现 顶部导航栏并实现动态路由

首先，你需要安装Vue和ElementUI，可以通过以下命令进行安装：

npm install vue element-ui --save

然后在你的Vue项目中引入ElementUI和Vue Router，并创建一个顶部导航栏组件。这个组件将包含一个菜单和一个路由视图。

<template>
  <div>
    <el-menu :default-active="$route.path" class="el-menu-demo" mode="horizontal" @select="handleSelect">
      <el-menu-item index="/">首页</el-menu-item>
      <el-submenu index="/products">
        <template slot="title">产品</template>
        <el-menu-item index="/products/list">产品列表</el-menu-item>
        <el-menu-item index="/products/add">添加产品</el-menu-item>
      </el-submenu>
      <el-submenu index="/orders">
        <template slot="title">订单</template>
        <el-menu-item index="/orders/list">订单列表</el-menu-item>
        <el-menu-item index="/orders/add">添加订单</el-menu-item>
      </el-submenu>
    </el-menu>
    <router-view></router-view>
  </div>
</template>

<script>
import { mapState } from 'vuex';

export default {
  computed: {
    ...mapState(['user'])
  },
  methods: {
    handleSelect(key, keyPath) {
      this.$router.push(key);
    }
  }
};
</script>

<style scoped>
.el-menu-demo {
  margin-bottom: 20px;
}
</style>

在这个组件中，我们使用了ElementUI的`el-menu`组件来创建菜单，并使用Vue Router的`$route.path`来设置默认选项。我们还使用了Vue Router的`router-view`组件来显示当前路由的内容。

接下来，我们需要定义路由和组件。我们可以在Vue Router的配置中定义路由，如下所示：

import Vue from 'vue';
import Router from 'vue-router';

Vue.use(Router);

const HomePage = () => import('@/views/HomePage.vue');
const ProductListPage = () => import('@/views/ProductListPage.vue');
const ProductAddPage = () => import('@/views/ProductAddPage.vue');
const OrderListPage = () => import('@/views/OrderListPage.vue');
const OrderAddPage = () => import('@/views/OrderAddPage.vue');

export default new Router({
  mode: 'history',
  routes: [
    { path: '/', component: HomePage },
    { path: '/products/list', component: ProductListPage },
    { path: '/products/add', component: ProductAddPage },
    { path: '/orders/list', component: OrderListPage },
    { path: '/orders/add', component: OrderAddPage }
  ]
});

在这个配置中，我们定义了五个路由和对应的组件。我们还使用了Vue Router的`mode: 'history'`来启用HTML5历史记录模式。

最后，我们需要在Vue项目中引入并使用Vue Router和顶部导航栏组件。我们可以在Vue实例中定义Vue Router，并在Vue模板中使用顶部导航栏组件，如下所示：

import Vue from 'vue';
import App from './App.vue';
import router from './router';
import store from './store';

Vue.config.productionTip = false;

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app');

<template>
  <div id="app">
    <top-nav />
  </div>
</template>

<script>
import TopNav from '@/components/TopNav.vue';

export default {
  components: {
    TopNav
  }
};
</script>

现在，你已经成功地使用Vue和ElementUI创建了一个顶部导航栏，并实现了动态路由。