使用vue-antDesign menu 页面(添加面包屑跳转)

比眉伴天荒 2022-11-29 05:51 171阅读 0赞

![最终效果1][1]  
![最终效果2][2]  
看了很久文档和其它人写的界面,我发现这个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)
    	},
    	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 ,是为了首次进入的页面的默认选项问题,不在页面设置是为了刷新的时候,选择的路径不发生变化

新增面包屑  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hqeTE3MDMxNA_size_16_color_FFFFFF_t_70_pic_center]

[1]: /images/20221124/e79a6866151c4210a3829d25e4062f22.png
[2]: /images/20221124/dadf00e73e734fe48fab19b547ff52c7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hqeTE3MDMxNA_size_16_color_FFFFFF_t_70_pic_center]: /images/20221124/a64ce994c08346a085ba00264e8a79b2.png