【开发小记】elementUI面包屑跳到二级路由仍然保持父级导航栏高亮

一、效果展示

数据是我自己用node返回的虚拟数据，啊哈哈哈哈哈，占个位

二、问题描述及解决

首先是第一个问题

二级路由点亮了，但是导航栏上父级导航栏却不高亮了。
因为我用的是elementUI组件库，所以其实是让el-menu中的:default-active能监听到父级组件就行了，改下图画线部分即可。

<template>
    <header class="head-nav" v-if="$store.state.headerStatus">
        <el-row>
            <el-col :span="4" class="logo-container">
                
                <span class="title">缘来友你span>
            el-col>
            <el-col :span="16" class="menu">
                <el-menu
                    :default-active="'/' +this.$route.path.split('/')[1]"
                    class="el-menu-demo"
                    mode="horizontal"
                    @select="handleSelect"
                    router
                    background-color="#fff"
                    text-color="#333"
                    active-text-color="#0084ff"
                    style="flex:1"
                    >
                    <el-menu-item v-for="(item, i) in navList" :key="i" :index="item.name">
                        <template slot="title">
                        <span> {{ item.navItem }}span>
                        template>
                    el-menu-item>
                el-menu>
            el-col>
            <el-col :span="4" class="user">
                <div class="userinfo">
                    <img :src="user.avatar" class="avatar" alt="" />
                    <div class="welcome">
                        
                        <p class="name avatarname">欢迎,{{user.name}}p>
                    div>
                    <span class="username">
                        
                        <el-dropdown trigger="click" @command="setDialogInfo">
                            <span class="el-dropdown-link">
                                <i class="el-icon-caret-bottom el-icon--right">i>
                            span>
                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item command="info">个人信息el-dropdown-item>
                                <el-dropdown-item command="logout">退出el-dropdown-item>
                            el-dropdown-menu>
                        el-dropdown>
                    span>
                    
                div>
            el-col>
        el-row>
    header>
template>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51

第二个问题
刚进入页面的时候一直处于加载模式，因为我在子组件没有加载出来的时候会展示加载动画，所以这个问题要解决，就要保证进入父级组件的时候要主动展示一个子组件的内容。我直接在router文件里做了修改。重点在画圈圈的地方。