一、安装Ant Design-vue
npm install ant-design-vue --save
二、引入
mian.js引入
//全局样式
import 'ant-design-vue/dist/antd.css';
//按需引入
import {Layout, Menu} from 'ant-design-vue'
Vue.use(Menu)
Vue.use(Layout)
也可以使用babel-plugin-import进行按需加载
三、新建四个组件(一个父组件,三个子组件)
const Menu = ()=>import("../components/Menu")
const Childone = ()=>import("../components/Child1")
const Childtwo = ()=>import("../components/Child2")
const Childthree = ()=>import("../components/Child3")
//配置路由:
[
{
path:"/",
name:'Menu',
component:Menu,
meta:{
title:'菜单页面'
},
children:[
{
path:'',
name:'Childone',
component:Childone,
meta:{
title:"内容1"
},
},{
path:'/Childtwo',
name:'Childtwo',
component:Childtwo,
meta:{
title:"内容2"
},
},{
path:'/Childthree',
name:'Childthree',
component:Childthree,
meta:{
title:"内容3"
},
}
]
},
]
四、在Menu组件内
<template>
<div class="box">
<a-layout id="components-layout-demo-custom-trigger">
<a-layout-sider v-model="collapsed"
:trigger="null"
collapsible>
<a-menu :default-selected-keys="['1']"
:selectedKeys="selecTed"
:default-open-keys="['sub1']"
mode="inline"
theme="dark"
:inline-collapsed="collapsed"
@click="handleClick">
<a-sub-menu key="sub1">
<span slot="title">
<a-icon type="mail" /><span>Navigation One</span></span>
<a-menu-item key="1">
Option 1
</a-menu-item>
<a-menu-item key="2">
Option 2
</a-menu-item>
<a-menu-item key="3">
Option 3
</a-menu-item>
</a-sub-menu>
</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>
<a-layout-content :style="{ margin: '24px 16px', padding: '24px', background: '#fff', minHeight: '280px' }">
<!-- 路由出口 -->
<router-view></router-view>
</a-layout-content>
</a-layout>
</a-layout>
</div>
</template>
<script>
export default {
data() {
return {
collapsed: false,
selecTed:['1']
}
},
methods: {
handleClick(e) {
this.selecTed = [e.key]
if (e.key == "1") {
this.$router.push({
path: '/'
})
} else if (e.key == "2") {
this.$router.push({
path: '/Childtwo'
})
} else if (e.key == "3") {
this.$router.push({
path: '/Childthree',
query:{
}
})
}
}
},
//监听路由的变化
watch: {
'$route': function(newVal, oldVal){
// 判断如果是从组件3 调过来的就修改为 ['2]
if((newVal.path!==oldVal.path) && newVal.query.key=="2"){
this.selecTed = ["2"]
}
}
}
}
</script>
<style>
#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>
在child1.vue中
<template>
<div class="box">
子组件1
</div>
</template>
在child2.vue中
<template>
<div class="box1">
子组件2
</div>
</template>
在child3.vue中
<template>
<div class="box1">
子组件3
<button @click="herfChild2">跳转到子组件2</button>
</div>
</template>
<script>
export default {
data(){return { }},
methods:{
// 组件3 跳转到组件二
herfChild2(){
this.$router.push({
path:'/Childtwo',
query:{key:"2"}
})
}
},
}
</script>