vuecli4 elementui實現麵包屑

2022-05-25 10:06:13 字數 868 閱讀 7147

本文使用watch監聽路由資訊物件$route動態改變麵包屑

引數separator設定間隔符號

//elementui麵包屑原始結構

首頁 活動管理

活動列表

活動詳情

1、路由配置修改**

給路由新增meta屬性

,

component: () => import('../views/main.vue'),

children:[

,component:()=>import('./teachermain.vue')

},,component:()=>import('./teacherschool.vue')}]

}

2、需要引入麵包屑的頁面使用watch監聽

等待得到乙個陣列,包含meta資料

watch監聽路由資訊物件,獲取this.$route.matched內部的meta資料

路由資訊物件中的matched是乙個陣列包含路由從上往下的meta數值直接賦值給

vueCli3以及vueCli4建立vue專案

1.首先解除安裝舊版本 npm npm uninstall vue cli g yarn yarn global remove vue cli2.更新node版本 需要8.9以上 3.安裝vue cli3 npm npm install g vue cli yarn yarn global add ...

Vue Cli4搭建Vue專案

npm install g vue cli檢視腳手架版本 隨後建立專案 vue create vue next test選擇第二個 選擇相應的配置,不要選擇linter不然會後悔的 下一步輸入y,然後選擇相應的css 然後在選擇第乙個 再輸入y,然後回車就完事了 1 npm install 2 np...

vue cli 4 x 未解之謎

全域性安裝vue cli 已經是4.x的版本,做專案隨手乙個eslient,涼涼送給自己 目前我還沒有找到如何關閉vue cli語法檢測 所以只能解除安裝4.x,安裝3.x版本 解除安裝4.x npm uninstall vue cli g安裝3.x npm i vue cli 3.0.1 g此時在...