超详细的vue结合ElementUI实现头部导航栏进行页面跳转

孤独之风。

已于 2023-04-24 17:28:03 修改

阅读量8.1k

点赞数 10

文章标签： vue.js elementui javascript

于 2023-04-24 16:41:32 首次发布

本文链接：https://blog.csdn.net/qq_48961214/article/details/130345936

版权

先看看效果
在这里插入图片描述

首先给大家看一下我的vue项目的构成

2.每个页面里的内容
Home.vue

movie.vue

novel.vue

NavMenu.vue
在这里插入图片描述

<template>
  <div id="NavMenu">
    <el-menu
        :default-active="toIndex"
        class="el-menu-demo"
        text-color="#000000"
        active-text-color="#3989fa"
        mode="horizontal"
        @select="handleSelect"
    >
      <el-menu-item v-for="(item, index) in itemList" :index="item.path" :key="index">
        <span slot="title">{{ item.title }}</span>
      </el-menu-item>
    </el-menu>
    <el-main>
      <router-view></router-view>
    </el-main>
  </div>
</template>

<script>
export default {
  name: "NavMenu",
  data() {
    return {
      itemList: [    // 水平一级菜单栏的菜单
        { path: '/home', title: '首页' },
        { path: '/movie', title: '电影' },
        { path: '/novel', title: '小说' },

      ],
    };
  },
  computed: {
    toIndex(){  // 根据路径绑定到对应的一级菜单，防止页面刷新重新跳回第一个
      return '/' + this.$route.path.split('/')[1];
    },
  },
  methods: {
    handleSelect(path){  // 切换菜单栏
      this.$router.push({
        path: path
      });
    },
  },

};
</script>

<style scoped>
</style>

其他文件的配置
app.vue

main.js

路由配置

import Vue from 'vue'
import VueRouter from 'vue-router'
import NavMenu from "@/views/NavMenu";
import movie from "@/views/movie";
import novel from "@/views/novel";
import Home from "@/views/Home";
Vue.use(VueRouter)

export default new VueRouter(
    {
         routes : [
             {
                 path: '/',  // 程序启动默认路由
                 component: NavMenu,
                 meta: {title: '整体页面布局'},
                 redirect: '/home',  // 重定向到首页
                 children:[
                     {
                         path: '/home',  // 程序启动默认路由
                         component: Home,
                         meta: {title: '首页'},

                     },
                     {
                         path: '/movie',  // 程序启动默认路由
                         component: movie,
                         meta: {title: '电影'},

                     },
                     {
                         path: '/novel',  // 程序启动默认路由
                         component: novel,
                         meta: {title: '小说'},

                     },
                 ]
             },
        ]
    }
)