NavigatorPath組件是對Breadcrumb 的簡單二次封裝,主要用于顯示頁面的導航路徑
完整的代碼清單:
文件路徑:/src/components/navigator-path/index.vue
~~~
<template>
<Breadcrumb v-if="path" class="ivu-breadcrumb">
<BreadcrumbItem v-for="(item, index) of path" :key="index">
<template v-if="item.path">
<router-link :to="{ path: item.path || '', query: item.query || {} }">{{
item.title || ""
}}</router-link>
</template>
<template v-else>{{ item }}</template>
</BreadcrumbItem>
</Breadcrumb>
</template>
<script>
export default {
name: "iNavigator",
props: {
path: {
type: Array,
default() {
return [];
},
},
},
data() {
return {};
},
watch: {},
methods: {},
};
</script>
<style scoped>
.ivu-breadcrumb {
color: #999;
font-size: 16px;
padding-left: 5px;
margin-bottom: 5px;
margin-top: 5px;
}
</style>
~~~
- 文檔說明
- 服務端開發指南
- 客戶端開發指南
- 請求攔截器
- API接口實例分析
- 頁面文件
- NPM包管理
- 創建NPM包項目
- 課程設計
- 概述
- 內容管理系統項目
- 配置開發環境
- 設計靜態原型
- 快速構建項目
- 構建CMS系統前端界面
- 門戶模塊
- 新聞列表
- API接口規范
- 生成模擬數據
- 顯示新聞列表
- NavigatorPath組件
- ChannelHeader組件
- v-line-clamp指令
- formatDate過濾器
- 新聞詳情頁
- 修改頂部導航菜單
- 實現訪問遠程API
- 擴展功能
- 組件開發
- 服務端項目
- 編寫服務模塊
- 項目配置
- 數據庫
- 創建數據庫腳本
- 配置數據庫
- 創建模擬數據
- 新聞模塊控制器
- 添加邏輯驗證層
- 實現接口
- 書棧模塊
- QA