创建一个带有动态路由和菜单的vue项目

1. 首先，在命令行中使用Vue CLI创建一个新的Vue项目。可以使用以下命令：

vue create my-project

2. 安装Vue Router和Element UI库。可以使用以下命令：

npm install vue-router element-ui

3. 在src目录下创建一个views文件夹，用于存放页面组件。

4. 在src目录下创建一个router文件夹，用于存放路由组件。

5. 创建一个路由配置文件src/router/index.js，用于配置动态路由。可以参考以下代码：

import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/views/Home.vue'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      component: Home,
      meta: {
        title: 'Home'
      }
    },
    {
      path: '/about',
      component: () => import('@/views/About.vue'),
      meta: {
        title: 'About'
      }
    },
    {
      path: '/contact/:id',
      component: () => import('@/views/Contact.vue'),
      props: true,
      meta: {
        title: 'Contact'
      }
    }
  ]
})

6. 在App.vue中添加Element UI菜单组件和router-view组件。可以参考以下代码：

<template>
  <div id="app">
    <el-menu :default-active="$route.path" mode="horizontal">
      <el-menu-item index="/">Home</el-menu-item>
      <el-menu-item index="/about">About</el-menu-item>
      <el-submenu index="/contact">
        <template slot="title">Contact</template>
        <el-menu-item index="/contact/1">Contact 1</el-menu-item>
        <el-menu-item index="/contact/2">Contact 2</el-menu-item>
      </el-submenu>
    </el-menu>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

7. 在每个页面组件中添加meta对象，用于设置页面标题。可以参考以下代码：

<template>
  <div>
    <h1>Contact {{ $route.params.id }}</h1>
  </div>
</template>

<script>
export default {
  name: 'Contact',
  meta: {
    title: 'Contact'
  }
}
</script>

8. 在main.js中添加全局路由守卫，用于设置页面标题。可以参考以下代码：

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

Vue.config.productionTip = false

router.beforeEach((to, from, next) => {
  document.title = to.meta.title || 'My Vue Project'
  next()
})

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

9. 运行项目并测试。可以使用以下命令：

npm run serve