element的面包屑导航没有切换事件,没有各种动态绑定什么的,但是面包屑却需要随页面变化而层级变化
这里,我采用watch监听加判断来搞定
<template>
<el-card>
<!-- 面包屑 注意面包屑的点击方法,要加native,因为组件事件触发需要它 -->
<el-breadcrumb class="bread" separator-class="el-icon-arrow-right">
<el-breadcrumb-item
v-for="(item, index) in breadNum"
:key="index"
:to="{ path: bread[index].path, query: bread[index].query }"
@click.native="fnBreadClick"
>{{ bread[index].text }}</el-breadcrumb-item>
</el-breadcrumb>
<!-- 子组件在这里进行动态渲染 -->
<router-view />
</el-card>
</template>
<script>
export default {
data() {
return {
bread: [
{ text: '所有课程', path: '/allClass/course' },
{ text: '章', path: '/allClass/chapter', query: {}},
{ text: '节', path: '/allClass/burl', query: {}},
{ text: '题', path: '/allClass/question', query: {}}
],
breadNum: 1
}
},
//重点在这里,通过watch监听$route来实现监听子组件切换,然后封装一个判断的方法
//这里同样可以通过to from 来保留住那些跳转路由的参数,然后放到data中
watch: {
$route(to, from) {
this.fnBreadClick()
}
},
mounted() {
//为了防止页面刷新后,breadNum重新回归1,就在这里也执行一次判断方法,这样在子层级中刷新页面
//这个父组件的面包屑状态仍然是正确的
this.fnBreadClick()
},
methods: {
//这个方法通过判断路由中的name来判断当前是什么页面,然后切换bread要显示的面包屑数量来切换层级
//当然有时候同层级可能是不同页面,但在case中单独处理就可以了
fnBreadClick() {
const nowpage = this.$route.name
switch (nowpage) {
case 'course':
this.breadNum = 1
break
case 'chapter':
this.breadNum = 2
break
case 'burl':
this.breadNum = 3
break
case 'question':
this.breadNum = 4
break
default:
break
}
}
}
}
</script>
这里面的判断都是根据router中的name的,所以,要写好router中的name
{
path: '/allClass',
name: '/allClass',
component: () => import('views/allClass'),
redirect: '/allClass/course',
children: [
{ path: 'course', name: 'course', component: () => import('views/allClass/course.vue') },
{ path: 'chapter', name: 'chapter', component: () => import('views/allClass/chapter.vue') },
{ path: 'burl', name: 'burl', component: () => import('views/allClass/burl.vue') },
{ path: 'question', name: 'question', component: () => import('views/allClass/question.vue') }
]
},