123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657 |
- <template>
- <div class="breadcrumb">
- <span>当前位置:</span>
- <a-breadcrumb>
- <a-breadcrumb-item v-for="(item, index) in breadList" :key="item.name">
- <router-link
- v-if="item.name != name && index != 0"
- :to="{ path: item.path === '' ? '/' : item.path }"
- >{{ item.meta.title }}</router-link>
- <span v-else>{{ item.meta.title }}</span>
- </a-breadcrumb-item>
- </a-breadcrumb>
- </div>
- </template>
- <script>
- export default {
- data () {
- return {
- name: '',
- breadList: []
- }
- },
- created () {
- this.getBreadcrumb()
- },
- methods: {
- getBreadcrumb () {
- this.breadList = []
- // this.breadList.push({name: 'index', path: '/dashboard/', meta: {title: '首页'}})
- this.name = this.$route.name
- this.$route.matched.forEach((item, index) => {
- // item.name !== 'index' && this.breadList.push(item)
- if (!item.meta.hide && index > 0) {
- this.breadList.push(item)
- }
- })
- }
- },
- watch: {
- $route () {
- this.getBreadcrumb()
- }
- }
- }
- </script>
- <style scoped>
- .breadcrumb{
- display: flex;
- align-items: center;
- }
- .breadcrumb > span{
- color: rgba(0, 0, 0, 0.45);
- }
- </style>
|