[Vue3] element-plus麵包屑使用route.meta.title

2023 年 1 月 18 日

Vue3環境下用element-plus麵包屑、統一在router中設定所有頁面的麵包屑

router.js 先設定title

export const router = createRouter({
    history:createWebHashHistory(),
    routes:[
        {path:'dashboard-page',
         component:dashboardPage,
         name: 'dashboardPage',
         meta: { title: ['首頁'] },
        },
        {path:'page-a',
         component:PageA,
         name: 'PageA',
         meta: { title: ['首頁','頁面A'] },
        },
    ]
})

放麵包屑的頁面

<el-breadcrumb separator=">">
  <el-breadcrumb-item v-for="readcrumb in breadcrumb.readcrumbData" :key="readcrumb">
     {{ readcrumb }}
  </el-breadcrumb-item>
</el-breadcrumb>

<script>
import {router} from "@/router";
import {useRoute} from "vue-router";
export default {
  name: "PageA",
  setup() {
    const route = useRoute()
    router.beforeEach((to, from, next) => {
      if (to.meta.title) {
        breadcrumb.readcrumbData = to.meta.title
      }
      next();
    })
    let breadcrumb = reactive({
      readcrumbData: route.meta.title
    })
    return {
      breadcrumb,
    }
  }
</script>

Shiro