系列文章目录

一、elementui 导航菜单栏和Breadcrumb 面包屑关联

二、elementui 左侧导航菜单栏与main区域联动

三、elementui 中设置图片的高度并支持PC和手机自适应

四、elementui 实现一个固定位置的Pagination（分页）组件

文章目录

系列文章目录前言一、elementui 导航菜单栏和Breadcrumb 面包屑怎么关联？二、实现效果三、实现步骤1.本项目演示布局2.添加面包屑2.实现breadcrumbName方法3.监听方法4.路由指配5.路由配置信息

四、完整代码1.路由文件配置（dramsvue为我的项目名）2.导航栏和面包屑关联

前言

最近又突发奇想想做一个分享类的个人视频小网站，该网站主要分享电影、电视剧、动漫、资源4个模块。作为刚入门的vue小白，前前后后遇到各种问题，好在通过百度或官方文档解决了大部分问题。

该网站涉及技术：前端用elementui vue2.0，后端是纯springboot

下面是个人视频分享网站最新效果，该网站支持PC和手机，各位大佬们感兴趣的记得收藏，视频资源不定期更新，让你在闲暇之余既能学技术也能看感兴趣的视频资源！

观看网址：http://101.43.20.112 PS:域名申请下来了，但是备案过不了，理由是个人不能建立视频分享网站涉及版权侵权等各种问题，无奈只能用IP地址访问了

手机端： 个人更专注于手机端的实现效果，做了很多兼容性的调试工作。 PC端： 页面将就着看吧

开发过程中主要问题

一、elementui 导航菜单栏和Breadcrumb 面包屑怎么关联？

在Element UI中，导航菜单栏（NavMenu）和面包屑（Breadcrumb）经常被用来表示当前页面的位置和路径。要实现它们之间的关联，通常需要在两者的数据源上保持一致，并且监听路由的变化来更新面包屑的内容。完整代码附在文章的最后面

二、实现效果

点击导航栏左侧【2024新片精品】，关联到面包屑目录【首页/2024新片精品】

三、实现步骤

PS:针对有一点点vue基础的新手

1.本项目演示布局

我的项目是简单的 【上Header / 左Aside / 右Main】布局，如下图：

2.添加面包屑

在标签即上图中main的布局容器上方添加如下面包屑代码

首页

{{ breadcrumbName(this.$route.path) }}

2.实现breadcrumbName方法

methods: {

// 面包屑

breadcrumbName(route) {

console.log("route="+route)

return this.routePaths[route] || '未知';

}

},

3.监听方法

watch: {

$route(to, from) {

this.activeMenu = to.path;

}

}

4.路由指配

data() {

return {

activeMenu: '/', // 当前激活的菜单项

routePaths: {

'/': '首页',

'/filmview': '2024新片精品',

// 更多路由和面包屑名称的映射

}

}

},

5.路由配置信息

路由component配置一般有两种，我个人喜欢第二种

import HomeView from '../views/HomeView.vue'

const routes = [

{

path: '/',

name: 'home',

component: HomeView, // 第1种 路由配置

children: [

{path: '/filmview',component: ()=> import( '../views/FilmView.vue')} // // 第2种 路由配置

]

}

]

四、完整代码

1.路由文件配置（dramsvue为我的项目名）

一般在项目dramsvue\src\router\index.js

import Vue from 'vue'

import VueRouter from 'vue-router'

import HomeView from '../views/HomeView.vue'

Vue.use(VueRouter)

const routes = [

{

path: '/',

name: 'home',

component: HomeView,//

children: [

{path: '/filmview',component: ()=> import( '../views/FilmView.vue')}

]

}

]

const router = new VueRouter({

mode: 'history',

base: process.env.BASE_URL,

routes

})

export default router

2.导航栏和面包屑关联

我的代码全在：dramsvue\src\views\HomeView.vue

以上就是今天分享的内容，要是对你有帮助的话记得点赞收藏关注哦！

好文推荐

评论可见，请评论后查看内容，谢谢！！！
 您阅读本篇文章共花了：