vue-routerのマッチングに基づいてパンくずリスト機能を実現する

定数ルート = [
 //空のルートに一致し、ルートルートにリダイレクトします{
        パス：''、
        リダイレクト: '/home',
        メタ:{
            パンくずリストを表示:false
        }
    },
    //ルートルート{
        パス:'/home',
        コンポーネント: ()=>import('@/views/layout/index.vue'),
        名前:'ホーム',
        メタ:{
            タイトル:"ホーム",
            パンくずリストを表示:true
        }
    },
    //電子デジタル{
        パス:'/electronics',
        名前:「電子デジタル」
        コンポーネント: ()=>import('@/views/layout/index.vue'),
        リダイレクト: '/electronics/computer',
        メタ:{
            タイトル:「電子デジタル」、
            パンくずリストを表示:true
        },
        子供たち：[
            {
                パス: 'コンピュータ',
                名前:'コンピュータ',
                コンポーネント()=>import('@/views/electronics/children/computer/index.vue')、
                メタ:{
                    タイトル:"コンピューター",
                    パンくずリストを表示:true
                }
            },
            {
                パス: '電話',
                名前:「携帯電話」、
                コンポーネント: ()=>import('@/views/electronics/children/phone/index.vue'),
                メタ:{
                    タイトル:「携帯電話」、
                    パンくずリストを表示:true
                }
            },
            {
                パス:'tv',
                名前:'テレビ',
                コンポーネント: ()=>import('@/views/electronics/children/tv/index.vue'),
                メタ:{
                    タイトル:"テレビ",
                    パンくずリストを表示:true
                }
            }
        ]
    },
    //衣類、靴、帽子{
        パス:'/clothing',
        名前:「衣類、靴、帽子」
        コンポーネント: ()=>import('@/views/layout/index.vue'),
        リダイレクト: '/clothing/tops',
        メタ:{
            タイトル: 「衣類、靴、帽子」
            パンくずリストを表示:true
        },
        子供たち：[
            {
                パス:'トップス',
                名前:'トップス',
                コンポーネント: ()=>import('@/views/clothing/children/tops/index.vue'),
                メタ:{
                    タイトル:"トップス",
                    パンくずリストを表示:true
                }
            },
            {
                パス:'lower',
                名前:'ボトムス',
                コンポーネント: ()=>import('@/views/clothing/children/lower/index.vue'),
                メタ:{
                    タイトル:"ボトムス",
                    パンくずリストを表示:true
                }
            },
            {
                パス:'靴',
                名前:「靴」、
                コンポーネント: ()=>import('@/views/clothing/children/shoes/index.vue'),
                メタ:{
                    タイトル:"靴",
                    パンくずリストを表示:true
                }
            }
        ]
    },
    //最後に配置します。前のすべてのルートが一致しない場合は、このルートが一致し、ルートルートにリダイレクトされます。{
        パス：'*'、
        リダイレクト：'/'、
        メタ:{
            パンくずリストを表示:false
        } 
    },   
]

///src/views/layout/index.vue
<テンプレート>
    <div class="layout">
        <!-- サイドナビゲーションバー -->
        <div class="サイドメニュー">
            <el-メニュー
                デフォルトアクティブ="0"
                クラス="el-menu-vertical-demo"
                >
                    <div v-for="(item,index) ルート内" :key="index" :index="index+''">
                        <!-- セカンダリメニューはありません -->
                        <el-menu-item :index="index+''" v-if="!item.children">
                            <ルーターリンク:to="{name:item.name}">{{item.meta.title}}</ルーターリンク>
                        </el-menu-item>
                        <!-- セカンダリメニューあり -->
                        <el-submenu :index="index+''" v-else>
                            <テンプレート スロット="title">{{item.meta.title}}</テンプレート>
                            <el-menu-item v-for="(item_,index_) in item.children" :key="index_" :index="index+'-'+index_">
                                <ルーターリンク:to="{name:item_.name}">{{item_.meta.title}}</ルーターリンク>
                            </el-menu-item>
                        </el-サブメニュー>
                    </div>
            </el-menu>
        </div>
        <div class="content">
            <!-- パンくずリスト -->
            <div class="パンくず">
                <el-breadcrumb セパレータークラス="el-icon-arrow-right">
                    <el-breadcrumb-item v-for="(item,index) in breadcrumb" :key="index" :to="{ path: item.path}">{{item.meta.title}}</el-breadcrumb-item>
                </el-breadcrumb>
            </div>
            <!-- ルーティング終了 -->
            <ルータービュー></ルータービュー>
        </div>
    </div>
</テンプレート>

エクスポートデフォルト{
    データ（）{
        戻る {
        }
    },
    計算:{
        // サイドナビゲーションデータルート(){
            // $router.options からすべてのルーティング情報を取得し、フィルタリングしてこれを返します。$router.options.routes.filter((item)=>{
                item.meta.showInbreadcrumb を返す
            });
        },
        // パンくずデータ breadcrumb(){
            // ルート設定メタの showInbreadcrumb フィールドに従ってフィルタリングします。let matchedArr = this.$route.matched.filter((item)=>{
                戻り値 item.meta.showInbreadcrumb}
            );
            // ホームページは特別なので、パンくずリストの最初に必ず表示する必要があります。ホームページのルーティング情報がない場合は、手動で先頭に追加します。if (matchedArr [0].meta.title !== 'Home Page') {
                一致したArr.unshift(
                    {
                        パス:'/home',
                        メタ:{  
                            タイトル:"ホーム",
                            パンくずリストを表示:true
                        }
                    },
                ）
            }
            一致したArrを返します。
        },
    }
}