使用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 ,是为了首次进入的页面的默认选项问题,不在页面设置是为了刷新的时候,选择的路径不发生变化

新增面包屑