vue3+Typescript實現(xiàn)路由標(biāo)簽頁和面包屑功能

更新時間：2023年05月06日 09:49:41 作者：小城夏記

在使用 Vue.js 開發(fā)后臺管理系統(tǒng)時，經(jīng)常會遇到需要使用路由標(biāo)簽頁的場景，這篇文章主要介紹了vue3+Typescript實現(xiàn)路由標(biāo)簽頁和面包屑,需要的朋友可以參考下

第一步：創(chuàng)建路由標(biāo)簽組件和面包屑
第二步：創(chuàng)建路由標(biāo)簽數(shù)組
第三步：監(jiān)聽路由變化并自動添加新標(biāo)簽
第四步：處理關(guān)閉標(biāo)簽事件
第五步：當(dāng)前路由標(biāo)題同步面包屑
其他補充：

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

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

需求分析

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

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

最終效果

在這里插入圖片描述

實現(xiàn)步驟

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

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

                <el-header height="80px">
                    <div class="head_info">
                        <div class="head_local">
                            <el-breadcrumb>
                                <el-breadcrumb-item :to="{ path: '/console' }">主頁</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)建一個名為 tag 的屬性來接收標(biāo)簽對象。然后，在模板中使用 v-bind="$attrs" 將所有父級作用域中的屬性傳遞給 el-tag 組件。最后，我們將標(biāo)簽的標(biāo)題和路由鏈接包含在 router-link 組件中。

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

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

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

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

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

watchEffect(() => {
    // 如果當(dāng)前路徑不是 '/' 并且該路徑?jīng)]有對應(yīng)的標(biāo)簽，則新增一個標(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)建一個新標(biāo)簽對象，并將其添加到標(biāo)簽數(shù)組中。

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

當(dāng)用戶點擊某個標(biāo)簽的關(guān)閉按鈕時，我們需要從標(biāo)簽數(shù)組中刪除該標(biāo)簽，并自動跳轉(zhuǎn)到前一個標(biāo)簽頁所對應(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)
    }
}

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

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

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

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

其他補充：

路由信息：

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

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

您可能感興趣的文章: