Vue前端项目-首页-面包屑-显示当前路径

目录

1、面包屑组件

1.1、对breadcrumb组件二次封装

1.2、引入面包屑组件

2、导航菜单点击

2.1、新增用户管理和角色管理页面

2.2、测试


实现效果:

Vue前端项目-首页-面包屑-显示当前路径_第1张图片

1、面包屑组件

1.1、对breadcrumb组件二次封装

新建 src / components / Breadcrumb / index.vue 组件






1.2、引入面包屑组件

src / layout / components / Navbar.vue 中,使用二次封装的面包屑组件

导入

import Breadcrumb from '@/components/Breadcrumb'

  components: {

    Hamburger,

    Breadcrumb

  }

使用

    

      id="breadcrumb-container"

      class="breadcrumb-container"

    />

具体代码:






2、导航菜单点击

点击导航菜单, 在主区域显示相关内容, 并在头部以面包屑的形式显示路径

2.1、新增用户管理和角色管理页面

新建 src / views / system / user / index.vue 和 src / views / system / role / index.vue 两个页面

内容大致是:






2.2、测试

重新部署编译后,单击左侧菜单即可实现效果!!

 

 

 

 

 

 

 

 

你可能感兴趣的:(vue)