Vue2+element-ui实现面包屑导航
更新时间:2022年04月12日 09:51:54 作者:kisushotto
这篇文章主要为大家详细介绍了Vue2+element-ui使用面包屑导航的正确姿势,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
本文实例为大家分享了Vue2+element-ui实现面包屑导航的具体代码,供大家参考,具体内容如下
1、面包屑导航栏布局
代码:
<template> <!--面包屑导航页签--> <div style="padding: 25px 0;flex: 1"> <el-breadcrumb separator-class="el-icon-arrow-right"> <el-breadcrumb-item v-for="breadCrumbItem in breadCrumbList" :key="breadCrumbItem.path" :to="breadCrumbItem.path"> {{breadCrumbItem.meta.title}} </el-breadcrumb-item> </el-breadcrumb> </div> </template>
在使用面包屑导航的vue文件里添加:
<script> export default { computed: { breadCrumbList() { return this.$route.matched; } }, } </script>
2、index.js里面配置路由:
import Vue from 'vue' import VueRouter from 'vue-router' Vue.use(VueRouter) const routes = [ //主页 { path: '/', component: () => import(/* webpackChunkName: "about" */ '../views/Manage.vue'), redirect: "/home", /*请求'/manage'时重定向到/manage/home路由*/ meta: {title: ""}, //定义其他属性 children: [ { path: "home", name: '主页', meta: {title: "主页"}, component: () => import("../views/Home") }, ] }, //系统管理 { path: '/sys', component: () => import(/* webpackChunkName: "about" */ '../views/Manage.vue'), meta: {title: "系统管理"}, //定义其他属性 redirect: "/home", //用户界面子路由 children: [ { path: "user", name: '用户管理', meta: {title: "用户管理"}, component: () => import("../views/User") }, { path: "order", name: '订单管理', meta: {title: "订单管理"}, component: () => import("../views/Order") } ] } ] const router = new VueRouter({ mode: 'history', base: process.env.BASE_URL, routes }) export default router
3、侧边导航栏样式
代码:
<template> <el-menu> <!--主页--> <el-menu-item index="/"> <template slot="title"><i class="el-icon-s-home"></i> <span slot="title">主页</span> </template> </el-menu-item> <!--系统菜单--> <el-submenu index="/sys"> <template slot="title"><i class="el-icon-menu"></i> <span slot="title">系统管理</span> </template> <el-menu-item index="/sys/user"><i class="el-icon-s-custom"/>用户管理</el-menu-item> <el-menu-item index="/sys/order"><i class="el-icon-s-check"/>订单管理</el-menu-item> </el-submenu> </el-menu> </template>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
相关文章
vue+element UI 文字加下划线长度多出一点点的问题
这篇文章主要介绍了vue+element UI 文字加下划线长度多出一点点的问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教2022-08-08vue里使用create,mounted调用方法的正确姿势说明
这篇文章主要介绍了vue里使用create,mounted调用方法的正确姿势,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教2022-04-04解决vue 使用axios.all()方法发起多个请求控制台报错的问题
这篇文章主要介绍了解决vue 使用axios.all()方法发起多个请求控制台报错的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧2020-11-11vue-element-admin搭建后台管理系统的实现步骤
本文主要介绍了vue-element-admin搭建后台管理系统的实现步骤,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下2021-10-10
最新评论