vue實(shí)現(xiàn)動態(tài)面包屑導(dǎo)航
更新時(shí)間：2022年04月13日 10:54:05 作者：風(fēng)如也
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)動態(tài)面包屑導(dǎo)航的使用方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了vue實(shí)現(xiàn)動態(tài)面包屑導(dǎo)航的具體代碼，供大家參考，具體內(nèi)容如下
動態(tài)面包屑導(dǎo)航是根據(jù)路由中的matched獲取到的
單獨(dú)提取出面包屑導(dǎo)航欄組件
<template>
? <el-breadcrumb class="app-breadcrumb" separator="/">
? ? <transition-group name="breadcrumb">
? ? ? <el-breadcrumb-item v-for="item in levelList" :key="item.path" :to="{ path: item.path }">
? ? ? ? <span>{{ item.meta.title }}</span>
? ? ? </el-breadcrumb-item>
? ? </transition-group>
? </el-breadcrumb>
</template>
<script>
export default {
? data () {
? ? return {
? ? ? levelList: null
? ? }
? },
? watch: {
? ? $route () {
? ? ? this.getBreadcrumb()
? ? }
? },
? created() {
? ? this.getBreadcrumb()
? },
? methods: {
? ? getBreadcrumb () {
? ? ? let matched = this.$route.matched.filter(item => item.meta && item.meta.title)
? ? ? const first = matched[0]
? ? ? if (!this.isIndex(first)) {
? ? ? ? matched = [{ path: '/index', meta: { title: '首頁' } }].concat(matched)
? ? ? ? this.levelList = matched
? ? ? } else {
? ? ? ? this.levelList = [{ path: '/index', meta: { title: '首頁' } }]
? ? ? }
? ? },
? ? isIndex (route) {
? ? ? const redirect = route && route.redirect
? ? ? if (!redirect) {
? ? ? ? return false
? ? ? }
? ? ? return redirect === '/index'
? ? }
? },
}
</script>
<style lang="scss">
/* breadcrumb transition */
.breadcrumb-enter-active,
.breadcrumb-leave-active {
? transition: all .5s;
}
.breadcrumb-enter,
.breadcrumb-leave-active {
? opacity: 0;
? transform: translateX(20px);
}
.breadcrumb-move {
? transition: all .5s;
}
.breadcrumb-leave-active {
? position: absolute;
}
.app-breadcrumb.el-breadcrumb {
? margin-left: 8px;
}
</style>在布局組件中應(yīng)用
<!-- 面包屑 --> <dBreadcrumb class="breadcrumb-container" />
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
Vue3 elementUI 中 date-picker 使用過程遇到坑
這篇文章主要介紹了Vue3 elementUI 中 date-picker 使用過程遇到坑,本文給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2023-10-10
這篇文章主要介紹了Vue2.x-使用防抖以及節(jié)流的示例，幫助大家更好的理解和學(xué)習(xí)使用vue框架，感興趣的朋友可以了解下2021-03-03
Vue項(xiàng)目使用PostCSS做h5頁面的屏幕適配的配置步驟
PostCSS 是一個(gè)用 JavaScript 編寫的工具,用于將 CSS 轉(zhuǎn)換為另一種 CSS,在做h5頁面的屏幕適配時(shí),結(jié)合 PostCSS 的一些插件能輕松實(shí)現(xiàn),下面以結(jié)合 postcss-pxtorem 插件為例,詳細(xì)介紹配置步驟,需要的朋友可以參考下2025-02-02
這篇文章主要介紹了Vue 實(shí)現(xiàn)簡易多行滾動“彈幕”效果，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-01-01
Vue后臺實(shí)現(xiàn)點(diǎn)擊圖片放大功能的示例代碼
這篇文章主要為大家詳細(xì)介紹了如何利用Vue實(shí)現(xiàn)點(diǎn)擊圖片放大功能，文中的示例代碼講解詳細(xì)，具有一定的借鑒價(jià)值，需要的可以參考一下2022-12-12
自定義指令是vue中使用頻率僅次于組件，其包含bind、inserted、update、componentUpdated、unbind五個(gè)生命周期鉤子。本文將對vue指令的工作原理進(jìn)行相應(yīng)介紹2021-06-06
Vue3?響應(yīng)式系統(tǒng)實(shí)現(xiàn)?computed
這篇文章主要介紹了?Vue3?響應(yīng)式系統(tǒng)實(shí)現(xiàn)?computed，文章圍繞主題展開詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，感興趣的小伙伴可以參考一下2022-06-06
vue3+vite+移動端webview打包后頁面加載空白問題解決辦法
這篇文章主要給大家介紹了關(guān)于vue3+vite+移動端webview打包后頁面加載空白問題的解決辦法,文中通過代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2024-06-06
這篇文章主要介紹了vue計(jì)算屬性及函數(shù)的選擇，文章圍繞主題的相關(guān)資料展開詳細(xì)介紹，需要的小伙伴可以參考一下2022-05-05
這篇文章主要介紹了vue中渲染對象中屬性時(shí)顯示未定義的解決，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07