在vue中實(shí)現(xiàn)路由標(biāo)簽頁(yè)和面包屑

在使用 Vue.js 開(kāi)發(fā)后臺(tái)管理系統(tǒng)時(shí)，經(jīng)常會(huì)遇到需要使用路由標(biāo)簽頁(yè)的場(chǎng)景。本文介紹如何使用 Vue.js 實(shí)現(xiàn)路由標(biāo)簽頁(yè)。

需求分析

我們需要實(shí)現(xiàn)以下功能：

• 點(diǎn)擊菜單或路由時(shí)，在頁(yè)面上打開(kāi)一個(gè)新標(biāo)簽頁(yè)。
• 根據(jù)當(dāng)前路由自動(dòng)添加標(biāo)簽，如果標(biāo)簽已存在則不再添加。
• 可以通過(guò)關(guān)閉標(biāo)簽來(lái)切換當(dāng)前標(biāo)簽頁(yè)，并自動(dòng)跳轉(zhuǎn)到前一個(gè)標(biāo)簽頁(yè)所對(duì)應(yīng)的路由。

最終效果

實(shí)現(xiàn)步驟

第一步：創(chuàng)建路由標(biāo)簽組件和面包屑

我們可以使用 Element UI 中的 el-tag 和breadcrumb組件來(lái)實(shí)現(xiàn)路由標(biāo)簽以及面包屑

                <el-header height="80px">
                    <div class="head_info">
                        <div class="head_local">
                            <el-breadcrumb>
                                <el-breadcrumb-item :to="{ path: '/console' }">主頁(yè)</el-breadcrumb-item>
                                <el-breadcrumb-item>{{ title }}</el-breadcrumb-item>
                            </el-breadcrumb>
                        </div>
                    </div>
                    <div class="head_tag">
                        <el-tag v-for="tag, index in tags" :key="index" :closable="tag.path !== '/console'" class="mx-1"
                            :disable-transitions="false" @close="handleClose(tag)">
                            <router-link :to="tag.path">{{ tag.name }}</router-link>
                        </el-tag>
                    </div>
                </el-header>

在組件中，我們首先使用 defineProps 創(chuàng)建一個(gè)名為 tag 的屬性來(lái)接收標(biāo)簽對(duì)象。然后，在模板中使用 v-bind="$attrs" 將所有父級(jí)作用域中的屬性傳遞給 el-tag 組件。最后，我們將標(biāo)簽的標(biāo)題和路由鏈接包含在 router-link 組件中。

第二步：創(chuàng)建路由標(biāo)簽數(shù)組

定義了一個(gè)名為tags的響應(yīng)式數(shù)據(jù)對(duì)象，有兩個(gè)屬性，分別是 name 和 path，表示標(biāo)簽頁(yè)的名稱和路徑。默認(rèn)首頁(yè)加入tag標(biāo)簽組，后面加入判斷條件將首頁(yè)不可刪除。

const tags = reactive([
    { name: '首頁(yè)', path: '/console' }
])

第三步：監(jiān)聽(tīng)路由變化并自動(dòng)添加新標(biāo)簽

我們可以使用 watchEffect 函數(shù)來(lái)監(jiān)聽(tīng)當(dāng)前路由的變化，并根據(jù)當(dāng)前路由自動(dòng)添加新標(biāo)簽。

watchEffect(() => {
    // 如果當(dāng)前路徑不是 '/' 并且該路徑?jīng)]有對(duì)應(yīng)的標(biāo)簽，則新增一個(gè)標(biāo)簽
    if (route.path !== '/console' && !tags.some((tag) => tag.path === route.path)) {
        const tag = { name: route.meta.title as string, path: route.path };
        tags.push(tag);
    }
});

在上面的代碼中，我們首先檢查當(dāng)前路徑是否為“/console”，如果不是，則進(jìn)行如下操作：

• 檢查當(dāng)前路徑是否已經(jīng)存在標(biāo)簽數(shù)組中。
• 如果不存在，則創(chuàng)建一個(gè)新標(biāo)簽對(duì)象，并將其添加到標(biāo)簽數(shù)組中。

第四步：處理關(guān)閉標(biāo)簽事件

當(dāng)用戶點(diǎn)擊某個(gè)標(biāo)簽的關(guān)閉按鈕時(shí)，我們需要從標(biāo)簽數(shù)組中刪除該標(biāo)簽，并自動(dòng)跳轉(zhuǎn)到前一個(gè)標(biāo)簽頁(yè)所對(duì)應(yīng)的路由。

const handleClose = (tag: any) => {
    const index = tags.findIndex((t) => t.path === tag.path);
    if (index !== -1) {
        router.push(tags[index - 1].path);
        setTimeout(() => {
            tags.splice(index, 1);
        }, 0)
    }
}

在上面的代碼中，我們首先通過(guò)findIndex獲取要關(guān)閉的標(biāo)簽對(duì)象在標(biāo)簽數(shù)組中的索引。然后，使用 router.push 將頁(yè)面自動(dòng)跳轉(zhuǎn)到前一個(gè)標(biāo)簽頁(yè)所對(duì)應(yīng)的頁(yè)面。這里使用setTimeout函數(shù)主要是進(jìn)行異步操作，為了確保刪除操作在下一次 DOM 渲染時(shí)進(jìn)行。如果不添加的話會(huì)導(dǎo)致用戶點(diǎn)擊后頁(yè)面跳轉(zhuǎn)了，但是tag標(biāo)簽沒(méi)有進(jìn)行關(guān)閉。

第五步：當(dāng)前路由標(biāo)題同步面包屑

const title = computed(() => route.meta.title);

使用 route.meta.title 表達(dá)式獲取當(dāng)前路由信息對(duì)象中的meta屬性下的 title 值。這里的 meta 屬性可以在路由配置信息中設(shè)置，用于存儲(chǔ)一些與路由相關(guān)的元數(shù)據(jù)，以便在程序運(yùn)行時(shí)進(jìn)行訪問(wèn)和使用。當(dāng) title 計(jì)算屬性的值發(fā)生變化時(shí)，與之相關(guān)聯(lián)的 DOM 元素也會(huì)自動(dòng)更新。

其他補(bǔ)充：

路由信息：

  {
    path:"/adminIndex",
    component:adminIndex,
    meta:{title: '主頁(yè)' },
    children:[
      {
        path: "/console",
        component: Console,
        meta:{title: '工作臺(tái)' }
      },
      {
        path:"/newList",
        component:newList,
        meta:{title: '新聞管理-視頻管理' }
      },
      {
        path:"/paperList",
        component:paperList,
        meta:{title: '文章管理' }
      }
    ]
  },

到此這篇關(guān)于vue3+Typescript實(shí)現(xiàn)路由標(biāo)簽頁(yè)和面包屑的文章就介紹到這了,更多相關(guān)vue3面包屑內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論