提交者
Gitee
!287 更新到【默认首页使用keep-alive缓存】后报错
Merge pull request !287 from wangzhaoqiang/master
正在显示
1 个修改的文件
包含
74 行增加
和
74 行删除
| 1 | -<template> | ||
| 2 | - <el-breadcrumb class="app-breadcrumb" separator="/"> | ||
| 3 | - <transition-group name="breadcrumb"> | ||
| 4 | - <el-breadcrumb-item v-for="(item,index) in levelList" :key="item.path"> | ||
| 5 | - <span v-if="item.redirect==='noRedirect'||index==levelList.length-1" class="no-redirect">{{ item.meta.title }}</span> | ||
| 6 | - <a v-else @click.prevent="handleLink(item)">{{ item.meta.title }}</a> | ||
| 7 | - </el-breadcrumb-item> | ||
| 8 | - </transition-group> | ||
| 9 | - </el-breadcrumb> | ||
| 10 | -</template> | ||
| 11 | - | ||
| 12 | -<script> | ||
| 13 | -export default { | ||
| 14 | - data() { | ||
| 15 | - return { | ||
| 16 | - levelList: null | ||
| 17 | - } | ||
| 18 | - }, | ||
| 19 | - watch: { | ||
| 20 | - $route(route) { | ||
| 21 | - // if you go to the redirect page, do not update the breadcrumbs | ||
| 22 | - if (route.path.startsWith('/redirect/')) { | ||
| 23 | - return | ||
| 24 | - } | ||
| 25 | - this.getBreadcrumb() | ||
| 26 | - } | ||
| 27 | - }, | ||
| 28 | - created() { | ||
| 29 | - this.getBreadcrumb() | ||
| 30 | - }, | ||
| 31 | - methods: { | ||
| 32 | - getBreadcrumb() { | ||
| 33 | - // only show routes with meta.title | ||
| 34 | - let matched = this.$route.matched.filter(item => item.meta && item.meta.title) | ||
| 35 | - const first = matched[0] | ||
| 36 | - | ||
| 37 | - if (!this.isDashboard(first)) { | ||
| 38 | - matched = [{ path: '/index', meta: { title: '首页' }}].concat(matched) | ||
| 39 | - } | ||
| 40 | - | ||
| 41 | - this.levelList = matched.filter(item => item.meta && item.meta.title && item.meta.breadcrumb !== false) | ||
| 42 | - }, | ||
| 43 | - isDashboard(route) { | ||
| 44 | - const name = route && route.name | ||
| 45 | - if (!name) { | ||
| 46 | - return false | ||
| 47 | - } | ||
| 48 | - return name.trim() === '首页' | ||
| 49 | - }, | ||
| 50 | - handleLink(item) { | ||
| 51 | - const { redirect, path } = item | ||
| 52 | - if (redirect) { | ||
| 53 | - this.$router.push(redirect) | ||
| 54 | - return | ||
| 55 | - } | ||
| 56 | - this.$router.push(path) | ||
| 57 | - } | ||
| 58 | - } | ||
| 59 | -} | ||
| 60 | -</script> | ||
| 61 | - | ||
| 62 | -<style lang="scss" scoped> | ||
| 63 | -.app-breadcrumb.el-breadcrumb { | ||
| 64 | - display: inline-block; | ||
| 65 | - font-size: 14px; | ||
| 66 | - line-height: 50px; | ||
| 67 | - margin-left: 8px; | ||
| 68 | - | ||
| 69 | - .no-redirect { | ||
| 70 | - color: #97a8be; | ||
| 71 | - cursor: text; | ||
| 72 | - } | ||
| 73 | -} | ||
| 74 | -</style> | 1 | +<template> |
| 2 | + <el-breadcrumb class="app-breadcrumb" separator="/"> | ||
| 3 | + <transition-group name="breadcrumb"> | ||
| 4 | + <el-breadcrumb-item v-for="(item,index) in levelList" :key="item.path"> | ||
| 5 | + <span v-if="item.redirect==='noRedirect'||index==levelList.length-1" class="no-redirect">{{ item.meta.title }}</span> | ||
| 6 | + <a v-else @click.prevent="handleLink(item)">{{ item.meta.title }}</a> | ||
| 7 | + </el-breadcrumb-item> | ||
| 8 | + </transition-group> | ||
| 9 | + </el-breadcrumb> | ||
| 10 | +</template> | ||
| 11 | + | ||
| 12 | +<script> | ||
| 13 | +export default { | ||
| 14 | + data() { | ||
| 15 | + return { | ||
| 16 | + levelList: null | ||
| 17 | + } | ||
| 18 | + }, | ||
| 19 | + watch: { | ||
| 20 | + $route(route) { | ||
| 21 | + // if you go to the redirect page, do not update the breadcrumbs | ||
| 22 | + if (route.path.startsWith('/redirect/')) { | ||
| 23 | + return | ||
| 24 | + } | ||
| 25 | + this.getBreadcrumb() | ||
| 26 | + } | ||
| 27 | + }, | ||
| 28 | + created() { | ||
| 29 | + this.getBreadcrumb() | ||
| 30 | + }, | ||
| 31 | + methods: { | ||
| 32 | + getBreadcrumb() { | ||
| 33 | + // only show routes with meta.title | ||
| 34 | + let matched = this.$route.matched.filter(item => item.meta && item.meta.title) | ||
| 35 | + const first = matched[0] | ||
| 36 | + | ||
| 37 | + if (!this.isDashboard(first)) { | ||
| 38 | + matched = [{ path: '/index', meta: { title: '首页' }}].concat(matched) | ||
| 39 | + } | ||
| 40 | + | ||
| 41 | + this.levelList = matched.filter(item => item.meta && item.meta.title && item.meta.breadcrumb !== false) | ||
| 42 | + }, | ||
| 43 | + isDashboard(route) { | ||
| 44 | + const name = route && route.name | ||
| 45 | + if (!name) { | ||
| 46 | + return false | ||
| 47 | + } | ||
| 48 | + return name.trim() === 'Index' | ||
| 49 | + }, | ||
| 50 | + handleLink(item) { | ||
| 51 | + const { redirect, path } = item | ||
| 52 | + if (redirect) { | ||
| 53 | + this.$router.push(redirect) | ||
| 54 | + return | ||
| 55 | + } | ||
| 56 | + this.$router.push(path) | ||
| 57 | + } | ||
| 58 | + } | ||
| 59 | +} | ||
| 60 | +</script> | ||
| 61 | + | ||
| 62 | +<style lang="scss" scoped> | ||
| 63 | +.app-breadcrumb.el-breadcrumb { | ||
| 64 | + display: inline-block; | ||
| 65 | + font-size: 14px; | ||
| 66 | + line-height: 50px; | ||
| 67 | + margin-left: 8px; | ||
| 68 | + | ||
| 69 | + .no-redirect { | ||
| 70 | + color: #97a8be; | ||
| 71 | + cursor: text; | ||
| 72 | + } | ||
| 73 | +} | ||
| 74 | +</style> |
-
请 注册 或 登录 后发表评论