使用vue-antDesign menu页面方式(添加面包屑跳转)
作者:hjy170314
这篇文章主要介绍了使用vue-antDesign menu页面方式(添加面包屑跳转),具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
使用vue-antDesign menu页面(添加面包屑跳转)
看了很久文档和其它人写的界面,我发现这个UI组件库和element-ui的区别还是挺大的。
使用element-ui的时候,可以直接定义router 进行绑定到路由,然后就可以显示数据了,而且路由表的格式不需要特殊处理,随便摆放都是可以的,只要使用的path或者name对应的上就行
但是ant没有指定路由的属性,这使得我们在跳转的时候需要使用到router-link 和router-view,这两个才能正常显示页面
.vue文件
<template> <!-- 入口文件 --> <a-layout id="components-layout-demo-custom-trigger"> <a-layout-sider v-model="collapsed" :trigger="null" collapsible> <div class="logo" /> <a-menu theme="dark" mode="inline" :selectedKeys='selectedKeys' :default-selected-keys="[$route.path]" :inline-collapsed="collapsed" @select='selectMenuItem' > <template v-for='(item,index) in menuList'> <a-sub-menu :key="item.pageUrl" v-if='item.children.length > 0'> <span slot="title"><a-icon type="user" /><span>{{item.menuName}}</span></span> <a-menu-item v-for="(sun,ind) in item.children" :key="sun.pageUrl"> <router-link :to="item.pageUrl"> {{sun.menuName}} </router-link> </a-menu-item> </a-sub-menu> <a-menu-item :key="item.pageUrl" v-else> <router-link :to="item.pageUrl"> <a-icon type="video-camera" /> <span>{{item.menuName}}</span> </router-link> </a-menu-item> </template> </a-menu> </a-layout-sider> <a-layout> <a-layout-header style="background: #fff; padding: 0"> <a-icon class="trigger" :type="collapsed ? 'menu-unfold' : 'menu-fold'" @click="() => (collapsed = !collapsed)" /> </a-layout-header> <keep-alive> <a-layout-content :style="{ margin: '24px 16px', padding: '24px', background: '#fff', minHeight: '280px' }" > <!-- 面包屑 --> <a-breadcrumb :routes="routes" style="background-color: #f0f2f5; padding: 10px 0;" separator=">"> <template slot="itemRender" slot-scope="{ route, params, routes, paths }" > <span v-if="routes.length === 1"> {{ route.meta.title }} </span> <router-link v-else :to="`${route.path}`" > {{ route.meta.title }} </router-link> </template> </a-breadcrumb> <transition> <router-view/> </transition> </a-layout-content> </keep-alive> </a-layout> </a-layout> </template>
<script> export default { data() { return { collapsed: false, selectedKeys:['/admin'], menuList:[ { id:'0', menuName:'首页', pageUrl:"/admin", title:"首页", children:[] }, { id:'1', menuName:'文章管理', pageUrl:"/wzgl", title:"文章", children:[ { id:'1-1', menuName: "文章概览", pageUrl:"/wzgl", title:"文章概览", } ] }, { id:'2', menuName:'人员管理', pageUrl:"/rygl", title:"人员", children:[] }, { id:'3', menuName:'系统设置', pageUrl:"/xtgl", title:"系统", children:[] }, ], routes: [] }; }, created() { this.routes = this.$route.matched.filter(item => item.meta.title) //刷新页面回到初始展开页面 // this.$router.push({ // path: this.selectedKeys[0] // }) }, methods:{ selectMenuItem(item,key){ this.$router.push({path: key}) } }, watch:{ // 监听路由变化 $route(e){ this.routes = e.matched.filter(items => items.meta.title) this.selectedKeys=[e.path] } }, }; </script>
<style scoped="scoped"> #components-layout-demo-custom-trigger{ height: 100%; } #components-layout-demo-custom-trigger .trigger { font-size: 18px; line-height: 64px; padding: 0 24px; cursor: pointer; transition: color 0.3s; } #components-layout-demo-custom-trigger .trigger:hover { color: #1890ff; } #components-layout-demo-custom-trigger .logo { height: 32px; background: rgba(255, 255, 255, 0.2); margin: 16px; } </style>
路由表需要这个写,在这里显示的内容全部都是当前内容的子元素,不然无法正常显示,会直接给你跳转到新界面.(因为我之前使用element-ui的时候是随便放的路由位置,这一次就完全用不了,所以我就改了)
router.js
{ path: '/', name: 'admin', component: _import('pages/index'), children:[ { path: '/', redirect: { name: 'Home' }, }, { path:"/admin", name:"Home", component: _import('pages/home/index') }, { path:"/wzgl", name:"Article", component: _import('pages/article/article') }, { path:"/xtgl", name:"System", component: _import('pages/system/system') }, { path:"/rygl", name:"Munber", component: _import('pages/menber/users') }, ] }, //最后需要添加一句代码,防止多次点击的push的路由问题 const routerPush = VueRouter.prototype.push VueRouter.prototype.push = function push(location) { return routerPush.call(this, location).catch(error=> error) }
在子路由中使用redirect ,是为了首次进入的页面的默认选项问题,不在页面设置是为了刷新的时候,选择的路径不发生变化
新增面包屑
总结
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。