vue-ant-desgin 面包屑

<template>
    <a-breadcrumb separator="/">
        <a-breadcrumb-item
            v-for="item in breadList"
            :key="item.path"
            :href="item.path"
        >
            <a :href="item.path"> {{ item.text }}</a>
        </a-breadcrumb-item>
    </a-breadcrumb>
</template>

<script>
export default {
    name: "breadCrumb",
    data() {
        return {
            breadList: [],
        };
    },
    watch: {
        $route() {
            this.getBreadcrumb();
        },
    },
    methods: {
        getBreadcrumb() {
            let matched = this.$route.matched;
            this.breadList = matched[matched.length - 1].meta.title;
        },
    },
    created() {
        this.getBreadcrumb();
    },
};
</script>

<style>
</style>
 {
        path: "cityCode",
        name: "cityCode",
        component: () =>
          import(/* webpackChunkName: "cityCode" */ "../views/basicDataManage/cityCode.vue"),
        meta: {
          keepAlive: true, // 需要缓存
          title: [
            {
              text: "基础数据",
            },
            {
              text: "数据管理",
            },
          ],
        },
      },