| | |
| | | <!-- 顶部路径 --> |
| | | <template> |
| | | <el-breadcrumb class="app-breadcrumb" separator="/"> |
| | | <transition-group name="breadcrumb"> |
| | | <el-breadcrumb-item v-for="(item,index) in levelList" :key="item.path"> |
| | | <span v-if="item.redirect === 'noRedirect' || index == levelList.length - 1" class="no-redirect">{{ item.meta.title }}</span> |
| | | <span |
| | | v-if="item.redirect === 'noRedirect' || index == levelList.length - 1" |
| | | class="no-redirect" |
| | | >{{ item.meta.title }}</span |
| | | > |
| | | <a v-else @click.prevent="handleLink(item)">{{ item.meta.title }}</a> |
| | | </el-breadcrumb-item> |
| | | </transition-group> |
| | |
| | | export default { |
| | | data() { |
| | | return { |
| | | levelList: null |
| | | } |
| | | levelList: null, |
| | | }; |
| | | }, |
| | | watch: { |
| | | $route(route) { |
| | | // if you go to the redirect page, do not update the breadcrumbs |
| | | if (route.path.startsWith('/redirect/')) { |
| | | return |
| | | if (route.path.startsWith("/redirect/")) { |
| | | return; |
| | | } |
| | | this.getBreadcrumb() |
| | | } |
| | | this.getBreadcrumb(); |
| | | }, |
| | | }, |
| | | created() { |
| | | this.getBreadcrumb() |
| | | this.getBreadcrumb(); |
| | | }, |
| | | methods: { |
| | | getBreadcrumb() { |
| | | // only show routes with meta.title |
| | | let matched = this.$route.matched.filter(item => item.meta && item.meta.title) |
| | | const first = matched[0] |
| | | let matched = this.$route.matched.filter( |
| | | (item) => item.meta && item.meta.title |
| | | ); |
| | | const first = matched[0]; |
| | | |
| | | if (!this.isDashboard(first)) { |
| | | matched = [{ path: '/index', meta: { title: '首页' }}].concat(matched) |
| | | matched = [{ path: "/index", meta: { title: "首页" } }].concat(matched); |
| | | } |
| | | |
| | | this.levelList = matched.filter(item => item.meta && item.meta.title && item.meta.breadcrumb !== false) |
| | | this.levelList = matched.filter( |
| | | (item) => item.meta && item.meta.title && item.meta.breadcrumb !== false |
| | | ); |
| | | }, |
| | | isDashboard(route) { |
| | | const name = route && route.name |
| | | const name = route && route.name; |
| | | if (!name) { |
| | | return false |
| | | return false; |
| | | } |
| | | return name.trim() === 'Index' |
| | | return name.trim() === "Index"; |
| | | }, |
| | | handleLink(item) { |
| | | const { redirect, path } = item |
| | | const { redirect, path } = item; |
| | | if (redirect) { |
| | | this.$router.push(redirect) |
| | | return |
| | | this.$router.push(redirect); |
| | | return; |
| | | } |
| | | this.$router.push(path) |
| | | } |
| | | } |
| | | } |
| | | this.$router.push(path); |
| | | }, |
| | | }, |
| | | }; |
| | | </script> |
| | | |
| | | <style lang="scss" scoped> |