经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » JS/JS库/框架 » Vue.js » 查看文章
Vue使用element-ui实现菜单导航
来源:jb51  时间:2021/9/27 13:08:17  对本文有异议

本文实例为大家分享了Vue使用element-ui实现菜单导航的具体代码,供大家参考,具体内容如下

效果图

目录截图

安装vue-router 和 element-ui

vue-route是官方路由导航,element-ui是饿了么封装的基于vue的组件库

  1. npm install vue-router --save
  2. npm install element-ui --save

关闭ESLint检查

新增配置文件src/vue.config.js 文件

  1. module.exports = {
  2. lintOnSave: false
  3. }

src/main.js

在main.js里引入vue-router 和 element-ui。
创建两个页面组件,电影和小说。
定义路由映射。
路由改成h5模式,去掉难看的#符号。

  1. import Vue from 'vue'
  2. import App from './App.vue'
  3.  
  4. import VueRouter from 'vue-router'
  5. import ElementUI from 'element-ui'
  6. import 'element-ui/lib/theme-chalk/index.css'
  7.  
  8.  
  9. import movie from './components/movie.vue'
  10. import novel from './components/novel.vue'
  11.  
  12. Vue.config.productionTip = false
  13.  
  14. Vue.use(VueRouter)
  15. Vue.use(ElementUI);
  16.  
  17. const routes = [
  18. { path: '/movie', component: movie },
  19. { path: '/novel', component: novel }
  20. ]
  21.  
  22. // 3. 创建 router 实例,然后传 `routes` 配置
  23. // 你还可以传别的配置参数, 不过先这么简单着吧。
  24. const router = new VueRouter({
  25. mode: 'history', //h5模式
  26. routes // (缩写) 相当于 routes: routes
  27. })
  28.  
  29. new Vue({
  30. render: h => h(App),
  31. router
  32. }).$mount('#app')

src/comments/movie.vue

电影页面组件

  1. <template>
  2. <div>
  3. movie页面
  4. </div>
  5. </template>
  6.  
  7. <script>
  8. export default {
  9. name: 'movie'
  10. }
  11. </script>
  12.  
  13.  
  14. <style scoped>
  15.  
  16. </style>

src/comments/novel.vue

小说页面组件

  1. <template>
  2. <div>
  3. novel页面
  4. </div>
  5. </template>
  6.  
  7. <script>
  8. export default {
  9. name: 'novel'
  10. }
  11. </script>
  12. <style scoped>
  13.  
  14. </style>

src/comments/NavMenu.vue

导航组件。这里使用了element-ui的菜单组件。navMenuData模拟了我们菜单的数据。属性default-active代表当前选中的菜单,router属性代表index自动当成路由路径。

v-for循环生成菜单,在template标签中写v-for,不会一直复制当前的template。

看别人博客都是:default-active="$route.path",我这里多了个/。所以在mounted生命周期里去除/。

  1. <template>
  2. <div id="NavMenu">
  3. <el-menu
  4. :default-active="activeIndex"
  5. class="el-menu-demo"
  6. mode="horizontal"
  7. @select="handleSelect"
  8. router
  9. >
  10. <!--
  11. <el-menu-item index="1">电影</el-menu-item>
  12. <el-menu-item index="2">小说</el-menu-item>
  13. <el-submenu index="3">
  14. <template slot="title">我的工作台</template>
  15. <el-menu-item index="3-1">选项1</el-menu-item>
  16. <el-menu-item index="3-2">选项2</el-menu-item>
  17. <el-menu-item index="3-3">选项3</el-menu-item>
  18. <el-submenu index="3-4">
  19. <template slot="title">选项4</template>
  20. <el-menu-item index="3-4-1">选项1</el-menu-item>
  21. <el-menu-item index="3-4-2">选项2</el-menu-item>
  22. <el-menu-item index="3-4-3">选项3</el-menu-item>
  23. </el-submenu>
  24. </el-submenu>
  25. -->
  26.  
  27. <template v-for="item in navMenuData">
  28. <el-menu-item :index="item.index" v-if="!item.child">{{item.name}}</el-menu-item>
  29.  
  30. <el-submenu :index="item.index" v-if="item.child">
  31. <template slot="title">{{item.name}}</template>
  32. <template v-for="item2 in item.child">
  33. <el-menu-item :index="item2.index">{{item2.name}}</el-menu-item>
  34. </template>
  35. </el-submenu>
  36. </template>
  37. </el-menu>
  38. </div>
  39. </template>
  40.  
  41. <script>
  42. export default {
  43. name: "NavMenu",
  44. data() {
  45. return {
  46. activeIndex: "movie",
  47. navMenuData: [
  48. { index: "movie", name: "电影" },
  49. { index: "novel", name: "小说" },
  50. {
  51. index: "2",
  52. name: "我的工作台",
  53. child: [{ index: "2-1", name: "选项1" },{ index: "2-2", name: "选项2" },{ index: "2-3", name: "选项3" }]
  54. },
  55. ]
  56. };
  57. },
  58. methods: {
  59. handleSelect(key, keyPath) {
  60. console.log(key, keyPath);
  61. }
  62. },
  63. mounted(){
  64. console.log(this.activeIndex)
  65. console.log(this.$route.path)
  66. this.activeIndex = this.$route.path.substring(1,this.$route.path.length);
  67.  
  68. }
  69. };
  70. </script>
  71.  
  72. <style scoped>
  73. </style>

src/App.vue

这里使用了element-ui的容器布局,引入了自己写的NavMenu菜单组件。

  1. <template>
  2. <div id="app">
  3. <el-container>
  4. <el-header>
  5. <NavMenu></NavMenu>
  6. </el-header>
  7. <el-main>
  8. <router-view></router-view> <!--路由出口 -->
  9. </el-main>
  10. <el-footer>Footer</el-footer>
  11. </el-container>
  12. </div>
  13. </template>
  14.  
  15. <script>
  16. import NavMenu from "./components/NavMenu.vue";
  17.  
  18. export default {
  19. name: "app",
  20. components: {
  21. NavMenu
  22. }
  23. };
  24. </script>
  25.  
  26. <style scoped>
  27. .el-header,
  28. .el-footer {
  29. background-color: #b3c0d1;
  30. color: #333;
  31. text-align: center;
  32. height: 100px;
  33. padding: 0px;
  34. }
  35.  
  36. .el-main {
  37. background-color: #e9eef3;
  38. color: #333;
  39. text-align: center;
  40. line-height: 160px;
  41. }
  42.  
  43. </style>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持w3xue。

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号