Vue 使用 Ant-d 简单实现左侧菜单栏和面包屑功能
好早就写了个案例，但是一直没时间整理，其实代码敲出来是一种学习，记录下来又是另一种学习，好好学习，天天向上！我爱学习！
我这边的左侧菜单栏是写死的，不是后台返回的动态菜单。
其实写菜单很简单，这篇博文不会写的很多，我直接把项目放到 Git 上，down下来看一下就可以了，很简单能明白。
主要是我们选择了一个菜单，然后如果我们页面刷新了，怎么保持我们打开的页面还是刷新前那个。其实也简单，就是读一下route路由。
<template>
<div class="side">
<a-menu
:default-selected-keys="[this.$route.path.split('/')[2]]"
:default-open-keys="[this.$route.path.split('/')[1]]"
mode="inline"
theme="light"
>
<a-sub-menu key="teacher">
<span slot="title">
<a-icon type="mail" />
<span>页面</span>
</span>
<a-menu-item key="onepage">
<router-link to="/teacher/onepage">页面一</router-link>
</a-menu-item>
<a-menu-item key="twopage">
<router-link to="/teacher/twopage">页面二</router-link>
</a-menu-item>
<a-menu-item key="threepage">
<router-link to="/teacher/threepage">页面三</router-link>
</a-menu-item>
</a-sub-menu>
<a-sub-menu key="student">
<span slot="title">
<a-icon type="appstore" />
<span>m页面</span>
</span>
<a-menu-item key="monepage">
<router-link to="/student/monepage">m页面一</router-link>
</a-menu-item>
<a-menu-item key="mtwopage">
<router-link to="/student/mtwopage">m页面二</router-link>
</a-menu-item>
</a-sub-menu>
</a-menu>
</div>
</template>
<script>
export default {
}
</script>
<style scoped>
.ant-menu-inline{
border: none;
}
</style>
然后再就是面包屑，这个面包屑需要和路由去配合使用，其实也简单，首先路由文件需要修改点东西，把每个页面的标题设置一下。
import Vue from "vue";
import VueRouter from "vue-router";
import hello from "../components/HelloWorld.vue";
Vue.use(VueRouter);
const routes = [
{
path: "/",
name: "hello",
component: hello,
redirect: '/teacher',
},
{
path: "/teacher",
component: hello,
meta: {title: '页面'},
redirect: '/teacher/onepage',
children: [
{
path: "onepage",
name: "one",
meta: {title: '页面一'},
component: () => import("../components/page01.vue")
},
{
path: "twopage",
name: "two",
meta: {title: '页面二'},
component: () => import("../components/page02.vue")
},
{
path: "threepage",
name: "three",
meta: {title: '页面三'},
component: () => import("../components/page03.vue")
},
]
},
{
path: "/student",
component: hello,
meta: {title: 'm页面'},
redirect: '/student/monepage',
children: [
{
path: "monepage",
name: "mone",
meta: {title: 'm页面一'},
component: () => import("../components/mpage01.vue")
},
{
path: "mtwopage",
name: "mtwo",
meta: {title: 'm页面二'},
component: () => import("../components/mpage02.vue")
}
]
},
{
path: "/about",
name: "About",
component: () =>
import(/* webpackChunkName: "about" */ "../views/About.vue")
}
];
const router = new VueRouter({
mode: "history",
base: process.env.BASE_URL,
routes
});
export default router;
就像上面那个样子。
然后就是面包屑组件需要获取这个路由名称然后渲染出来，其实很简单。
<template>
<div class="bao">
<a-breadcrumb separator='>'>
<a-breadcrumb-item v-for="(item,index) of $route.matched" :key="index" style="padding:5px">
<router-link :to="item.path" style="font-size:18px">{{item.meta.title}}</router-link>
</a-breadcrumb-item>
</a-breadcrumb>
</div>
</template>
<script>
export default {
watch :{
'$route':'init'
},
mounted(){
console.log(this.$route)
},
methods:{
init(){
console.log(this.$route)
}
}
};
</script>
<style scoped>
.bao{
background-color: #fff;
padding: 5px 0px;
margin-bottom: 20px;
border:1px solid #dddddd;
padding-left: 10px;
border-radius: 10px;
}
</style>
这样子就完成了左侧菜单栏和面包屑与页面的搭配。然后效果是这个样子的，简单部署了一下页面：
