目錄
一、前言：
二、網(wǎng)站頁(yè)面分析
三、開(kāi)發(fā)步驟
（一）、安裝element
（二）、安裝使用svg插件
（三）、編寫(xiě)主界面框架代碼
?（四）、編寫(xiě)菜單欄
?（五）、新建頁(yè)面及路由
（六）、定制頁(yè)面標(biāo)簽欄
第一步：
第二步：
（七）、修改封裝菜單欄
（八）、添加面包屑
四、結(jié)尾
一、前言：
先上圖，項(xiàng)目模板成品截圖：
開(kāi)源的vue管理后臺(tái)模板很多，如需快速開(kāi)發(fā)一個(gè)后臺(tái)管理可搜索“vue管理后臺(tái)模板”查找，本文旨在熟悉vue開(kāi)發(fā)過(guò)程實(shí)踐，適合vue剛?cè)腴T(mén)的小伙伴閱讀和動(dòng)手實(shí)踐，內(nèi)容偏長(zhǎng)，只想要代碼的同學(xué)可直接點(diǎn)擊 源代碼。通過(guò)本章博客你可以學(xué)到：
（1）、element UI組件庫(kù)的使用。
（2）、如何自定義組件。
（3）、路由的熟練使用。
（4）、vue項(xiàng)目開(kāi)發(fā)思想的提升。
（5）、……
本項(xiàng)目在上一章節(jié)集成項(xiàng)目基礎(chǔ)上開(kāi)發(fā)，可先點(diǎn)擊下方鏈接閱讀。（如閱讀本章無(wú)障礙請(qǐng)忽略）
vue系列（二）——vue3基礎(chǔ)項(xiàng)目（集成框架）搭建_蕭蕭風(fēng)的博客-CSDN博客目錄一、新建項(xiàng)目二、集成路由三、安裝配置axios（網(wǎng)絡(luò)請(qǐng)求庫(kù)）四、使用vuex（暫無(wú)）五、結(jié)尾打開(kāi)編輯器新建項(xiàng)目，填寫(xiě)項(xiàng)目名稱(chēng)，點(diǎn)擊創(chuàng)建，之后等待項(xiàng)目加載完成就可以了。我的Hbuilder X 版本是3.4.14新建的項(xiàng)目目錄下面是vue項(xiàng)目加載頁(yè)面的形式，單頁(yè)渲染，所有的內(nèi)容展示都是在index.html頁(yè)面上進(jìn)行渲染，而App.vue是index.html里面最外層的組件容器、包含全局的js代碼css樣式。所有的頁(yè)面的渲染是在App.vue容器里面進(jìn)行文件main.js：入口js文件，所有全局文件的引https://blog.csdn.net/xxfen_/article/details/125327388?spm=1001.2014.3001.5501
二、網(wǎng)站頁(yè)面分析
網(wǎng)站由登錄頁(yè)、主界面、內(nèi)容頁(yè)組成。
主界面整體模塊是由：
（1）、導(dǎo)航欄；
（2）、左測(cè)導(dǎo)航菜單欄；
（3）、頁(yè)面標(biāo)簽卡欄；
（4）、內(nèi)容欄（展示頁(yè)面）。
組成。
菜單欄的點(diǎn)擊切換改變的只是內(nèi)容欄的內(nèi)容，由此得出：
登錄頁(yè)和主界面是一級(jí)路由，內(nèi)容頁(yè)是主界面下的嵌套路由。
三、開(kāi)發(fā)步驟
（一）、安裝element
官網(wǎng)：?一個(gè) Vue 3 UI 框架 | Element Plus。
首先安裝國(guó)內(nèi)npm鏡像，這樣下載資源包速度會(huì)更快
npm install cnpm -g --registry=https://registry.npmmirror.com
然后，安裝element
npm install element-plus --save
?引入項(xiàng)目，在main.js文件中加入以下代碼
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
app.use(ElementPlus)測(cè)試一下引入是否成功，在home.vue中加入按鈕組件
<el-button type="primary">Primary</el-button>
?
?運(yùn)行項(xiàng)目：npm run dev
運(yùn)行效果如下，說(shuō)明引入成功：
（二）、安裝使用svg插件
- ?安裝：
npm i vite-plugin-svg-icons -D
- ?在src下新建存放svg目錄：
- 在components目錄下新建組件：SvgIcon.vue
<template>
<svg aria-hidden="true">
<use :xlink:href="symbolId" />
</svg>
</template>
<script>
import { defineComponent, computed } from 'vue';
export default defineComponent({
name: 'SvgIcon',
props: {
prefix: {
type: String,
default: 'icon',
},
name: {
type: String,
required: true,
},
},
setup(props) {
const symbolId = computed(() => `#${props.prefix}-${props.name}`);
return { symbolId };
},
});
</script>- ?在vite.config.js中配置：
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
import path from 'path'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
vue(),
createSvgIconsPlugin({
// 指定需要緩存的圖標(biāo)文件夾
iconDirs: [path.resolve(process.cwd(), 'src/icons/svg')],
// 指定symbolId格式
symbolId: '[name]',
})
]
})
- 在main.js中引入，添加代碼：
//導(dǎo)入Svg圖片插件，可以在頁(yè)面上顯示Svg圖片
import 'virtual:svg-icons-register'
import SvgIcon from "./components/SvgIcon.vue";
app.component('SvgIcon',SvgIcon)
- ?到了這里，運(yùn)行項(xiàng)目出現(xiàn)報(bào)錯(cuò)：沒(méi)有找到fast-glob。就需要安裝fast-glob。
npm i fast-glob
- ?測(cè)試使用
打開(kāi)Icon 圖標(biāo) | Element Plus
?點(diǎn)擊圖標(biāo)復(fù)制svg內(nèi)容
在新建的svg目錄下新建svg文件，名稱(chēng)格式：icon-“圖標(biāo)名稱(chēng)”，粘貼內(nèi)容保存
?在頁(yè)面中使用：
<SvgIcon name="aim" class="icon-svg" />
（三）、編寫(xiě)主界面框架代碼
- 先搭建一個(gè)整體框架，home.vue 代碼
<template v-slot:default>
<div :class="['content',isCollapse?'menu--fold':'menu--unfold']">
<!-- 側(cè)邊菜單欄 -->
<div class="menuLeft">
<div class="menu-nav-header">
<span>{{isCollapse?'控制臺(tái)':'管理控制臺(tái)'}}</span>
</div>
<!--todo 菜單欄組件 -->
</div>
<!-- 右邊內(nèi)容 -->
<div class="content-main">
<div class="navTop horizontalView">
<div class="nav_tools horizontalView">
<SvgIcon :name="isCollapse?'expand':'fold'" class="icon-svg" @click="isCollapse=!isCollapse" />
</div>
</div>
<!-- todo 內(nèi)容組件 -->
</div>
</div>
</template>
<script>
export default {
components: {
},
data: function() {
return {
isCollapse: false
}
}
}
</script>
<style>
@import url('../assets/css/home.css');
</style>
- ?編寫(xiě)css樣式
?
?通用的放在base.css中，頁(yè)面獨(dú)有的放在home.css
- base.css代碼：
.content {
width: 100%;
height: 100%;
font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微軟雅黑", Arial, sans-serif;
}
/* 水平布局 居中*/
.horizontalView {
position: relative;
flex-direction: row;
display: flex;
align-items: center;
}
/* 垂直布局居中 */
.verticalView {
position: relative;
flex-direction: column;
display: flex;
align-items: center;
}
/* 居中 */
.center {
position: absolute;
top: 50%;
left: 50%;
font-size: 28px;
transform: translate(-50%, -50%);
}
.w100 {
width: 100%;
}
.h100 {
height: 100%;
}
.icon-svg {
width: 1.4rem;
height: 1.4rem;
fill: currentColor;
overflow: hidden;
}
- home.css代碼：
/* -------側(cè)邊欄 折疊 */
.menu--fold .menuLeft {
width: 64px;
}
.menu--fold .content-main {
margin-left: 64px;
}
/* --------------------- */
/* ---------側(cè)邊欄 展開(kāi) */
.menu--unfold .menuLeft {
width: 230px;
}
.menu--unfold .content-main {
margin-left: 230px;
}
/* ------------- */
.navTop {
position: relative;
width: 100%;
height: 50px;
z-index: 100;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
box-sizing: border-box;
background: white;
}
.nav_tools {
height: 100%;
}
.nav_tools .icon-svg {
margin-left: 10px;
color: #5b5b5b;
}
.menuLeft {
position: fixed;
top: 0;
left: 0;
bottom: 0;
z-index: 1020;
overflow: hidden;
background-color: #263238;
}
.content-main {
position: relative;
background: #f1f4f5;
height: 100%;
}
.menu-nav-header {
color: white;
height: 50px;
line-height: 50px;
text-align: center;
font-size: 20px;
font-weight: bold;
/* background-color: #9fbea7; */
background-color: #566f7e;
}
/* 動(dòng)畫(huà) */
.nav_tools,
.menuLeft,
.content-main {
transition: inline-block 0.3s, left 0.3s, width 0.3s, margin-left 0.3s, font-size 0.3s;
}
- ?base.css放在app.vue
@import url("./assets/css/base.css");
- 看看頁(yè)面效果：
- 點(diǎn)擊上邊折疊按鈕
?（四）、編寫(xiě)菜單欄
請(qǐng)先去了解組件使用文檔：Menu 菜單 | Element Plus
復(fù)制實(shí)例代碼自定義內(nèi)容屬性及樣式，關(guān)閉組件提供的折疊動(dòng)畫(huà)，自定義動(dòng)畫(huà)樣式
- 在home.vue中加入修改菜單組件代碼
<!--todo 菜單欄組件 -->
<el-menu active-text-color="#fff" background-color="#263238" class="el-menu-vertical-demo"
:collapse-transition="false" default-active="2" text-color="#96a4ab " @open="handleOpen"
@close="handleClose" :collapse="isCollapse">
<el-menu-item index="1">
<SvgIcon name="home" class="icon-svg" />
<span slot=""> 首頁(yè)</span>
</el-menu-item>
<el-sub-menu index="2">
<template #title>
<SvgIcon name="img" class="icon-svg" />
<span> 圖片管理</span>
</template>
<el-menu-item index="1-1">
<SvgIcon name="img" class="icon-svg" />
<span> 圖片1</span>
</el-menu-item>
<el-menu-item index="1-2">
<SvgIcon name="img" class="icon-svg" />
<span> 圖片2</span>
</el-menu-item>
<el-sub-menu index="1-4">
<template #title>
<SvgIcon name="img" class="icon-svg" />
<span> 圖片3</span>
</template>
<el-menu-item index="1-4-1">
<SvgIcon name="img" class="icon-svg" />
<span> 圖片三級(jí)子菜單</span>
</el-menu-item>
</el-sub-menu>
</el-sub-menu>
<el-sub-menu index="3">
<template #title>
<SvgIcon name="collection" class="icon-svg" />
<span> 收藏管理</span>
</template>
<el-menu-item index="3">
<SvgIcon name="collection" class="icon-svg" />
<span class="icon-text"> 收藏</span>
</el-menu-item>
</el-sub-menu>
<el-menu-item index="4">
<SvgIcon name="about" class="icon-svg" />
<span> 設(shè)置</span>
</el-menu-item>
</el-menu>- home.css 中加入修改樣式代碼
/* 修改菜單欄樣式樣式 */
.menuLeft .el-menu {
border-right: none;
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
border-right: none;
width: 230px;
}
.el-menu .icon-text {
margin-left: 10px;
}
- 頁(yè)面效果：
?菜單欄編寫(xiě)到這還沒(méi)完呢，上面這種寫(xiě)法是每次添加、修改或刪除菜單都要在頁(yè)面中找到位置再修改有點(diǎn)繁瑣，在頁(yè)面代碼多了或菜單項(xiàng)好多時(shí)去編輯修改更是麻煩的一比，所以等后面再來(lái)優(yōu)化代碼，把菜單封裝成菜單數(shù)據(jù)集合，然后再在頁(yè)面中for循環(huán)展示。
?（五）、新建頁(yè)面及路由
- ?新建頁(yè)面：
index.vue，img1.vue，collect.vue，set.vue 。并在頁(yè)面內(nèi)加上頁(yè)面標(biāo)識(shí)文字。
- 配置路由：
router目錄下index.js代碼：
// import Vue from 'vue' //引入Vue
import {
createRouter,
createWebHashHistory
} from 'vue-router' //引入vue-router
// Vue.use(Router) //Vue全局使用Router
import home from '../views/home.vue'
import login from '../views/login.vue'
import index from '../views/index.vue'
import collect from '../views/collect.vue'
import set from '../views/set.vue'
import img1 from '../views/img1.vue'
const routes = [{
path: '',
redirect: "home"
}, {
path: '/',
redirect: "home"
},
{
path: '/login',
name: 'login',
component: login,
meta: {
title: '登錄'
}
},
{
path: '/home',
name: 'home',
component: home,
/* 子路由 */
children: [{
path: '/',
redirect: "index"
},{
path: '',
redirect: "index"
}, {
path: '/index',
name: 'index',
component: index,
meta: {
title: '首頁(yè)',
}
},
{
path: '/collect',
name: 'collect',
component: collect,
meta: {
title: '收藏',
isTab: true
}
},
{
path: '/img1',
name: 'img1',
component: img1,
meta: {
title: '圖片1',
isTab: true
}
},
{
path: '/set',
name: 'set',
component: set,
meta: {
title: '設(shè)置',
isTab: true
}
}
]
}
];
// 導(dǎo)航守衛(wèi)
// 使用 router.beforeEach 注冊(cè)一個(gè)全局前置守衛(wèi)，判斷用戶(hù)是否登陸
/* router.beforeEach((to, from, next) => {
if (to.path === '/login') {
next();
} else {
let token = localStorage.getItem('Authorization');
if (token === null || token === '') {
next('/login');
} else {
next();
}
}
}); */
const router = createRouter({
history: createWebHashHistory(),
routes
})
export default router;
- ?在home.vue中加入路由組件測(cè)試一下路由跳轉(zhuǎn)：
<router-view />
- ?在菜單項(xiàng)中加入跳轉(zhuǎn)路由代碼
在“首頁(yè)”菜單項(xiàng)加上點(diǎn)擊跳轉(zhuǎn)路由代碼：@click="$router.push({ name: 'index' })"
同理，在其它菜單項(xiàng)上加入相應(yīng)代碼。
- ?測(cè)試效果
點(diǎn)擊“設(shè)置”
?點(diǎn)擊“收藏”
?ok，路由配置成功！
（六）、定制頁(yè)面標(biāo)簽欄
二步走：
（1）、監(jiān)聽(tīng)路由的切換，存儲(chǔ)跳轉(zhuǎn)的路由的name（或path）集合，并存儲(chǔ)當(dāng)前的路由name。
（2）、使用 el-tabs標(biāo)簽頁(yè)組件Tabs 標(biāo)簽頁(yè) | Element Plus，自定義樣式，編寫(xiě)內(nèi)容組件。
第一步：
- 監(jiān)聽(tīng)路由變化，watch與data同層：
watch: {
$route: {
handler(to, from) {
if (to.path != from.path) {
// 處理路由
this.routeHandle(to);
}
}
}
},- 算了，直接放js全部代碼吧：
<script>
export default {
components: {
},
data: function() {
return {
isCollapse: false,
mainTabs: [],
mainTabsActiveName: '',
menuActiveName: '',
menus: []
}
},
created() {
let that = this;
that.routeHandle(that.$route);
},
// 監(jiān)聽(tīng)路由變化
watch: {
$route: {
handler(to, from) {
if (to.path != from.path) {
// 處理路由
this.routeHandle(to);
}
}
}
},
methods: {
resetDocumentClientHeight: function() {
this.documentClientHeight = document.documentElement['clientHeight'];
window.onresize = () => {
this.documentClientHeight = document.documentElement['clientHeight'];
this.loadSiteContentViewHeight();
};
},
loadSiteContentViewHeight: function() {
let height = this.documentClientHeight - 52; //減去導(dǎo)航欄高度50
console.log(this.$route.meta.isTab)
if (this.$route.meta.isTab) {
height -= 70; //減去tab欄高度40,減去上下邊距30
/* this.siteContentViewHeight = {
'min-height': height + 'px'
}; */
this.siteContentViewHeight = height;
} else {
height -= 30;
//給內(nèi)容區(qū)設(shè)置高度
this.siteContentViewHeight = height;
}
},
routeHandle: function(route) {
//每次切換頁(yè)面，重新計(jì)算頁(yè)面高度和內(nèi)容區(qū)高度
this.resetDocumentClientHeight();
this.loadSiteContentViewHeight();
if (route.meta.isTab) {
// tab選中, 不存在先添加
var tab = this.mainTabs.filter(item => item.name === route.name)[0];
if (!tab) {
if (route.meta.isDynamic) {
route = this.dynamicMenuRoutes.filter(item => item.name === route.name)[0];
if (!route) {
return console.error('未能找到可用標(biāo)簽頁(yè)!');
}
}
tab = {
menuId: route.meta.menuId || route.name,
name: route.name,
title: route.meta.title,
iframeUrl: route.meta.iframeUrl || '',
params: route.params,
query: route.query
};
this.mainTabs = this.mainTabs.concat(tab);
}
this.menuActiveName = tab.menuId + '';
this.mainTabsActiveName = tab.name;
}
},
mounted: function() {
let that = this;
that.resetDocumentClientHeight();
that.loadSiteContentViewHeight();
}
}
}
</script>第二步：
- 編寫(xiě)組件
<!-- todo 內(nèi)容組件 -->
<el-tabs v-if="$route.meta.isTab" v-model="mainTabsActiveName" :closable="true"
@tab-click="selectedTabHandle" @tab-remove="removeTabHandle">
<el-scrollbar ref="scroll" :height="siteContentViewHeight+32+'px'" @scroll="scroll">
<el-tab-pane v-for="item in mainTabs" :label="item.title" :name="item.name">
<el-card :style="'min-height:'+siteContentViewHeight + 'px'">
<router-view v-if="item.name === mainTabsActiveName" />
</el-card>
</el-tab-pane>
</el-scrollbar>
</el-tabs>
<div v-else>
<el-scrollbar ref="scroll" :height="siteContentViewHeight+32+'px'" @scroll="scroll">
<!-- 主入口標(biāo)簽頁(yè) e -->
<el-card :style="'min-height:'+ siteContentViewHeight + 'px'">
<router-view />
</el-card>
</el-scrollbar>
</div>- 修改樣式：
/* 修改標(biāo)簽欄樣式 */
.content-main .el-tabs .el-tabs__header {
z-index: 90;
padding: 0 55px 0 15px;
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.12), 0 0 6px 0 rgba(0, 0, 0, 0.04);
background-color: #fff;
}
.content-main .el-tabs .el-tabs__nav-wrap::after {
width: 0px;
}
.content-main .el-scrollbar .el-card {
margin: 15px 15px;
}
.content-main .el-tabs .el-tabs__header{
margin: unset;
}
.content-main .el-tabs .el-tab-pane{
}- ?在methods中添加函數(shù)方法
selectedTabHandle: function(tab, e) {
tab = this.mainTabs.filter(item => item.name === tab.paneName);
if (tab.length >= 1) {
this.$router.push({
name: tab[0].name,
query: tab[0].query,
params: tab[0].params
});
}
},
removeTabHandle: function(tabName) {
this.mainTabs = this.mainTabs.filter(item => item.name !== tabName);
if (this.mainTabs.length >= 1) {
// 當(dāng)前選中tab被刪除
if (tabName === this.mainTabsActiveName) {
var tab = this.mainTabs[this.mainTabs.length - 1];
this.$router.push({
name: tab.name,
query: tab.query,
params: tab.params
},
() => {
this.mainTabsActiveName = this.$route.name;
}
);
}
} else {
this.menuActiveName = '';
this.$router.push({
name: 'Home'
});
}
},- 效果：
（七）、修改封裝菜單欄
- ?在router文件下新建文件
- ?menu.js文件代碼：
var mu = {
longTitle: '管理控制臺(tái)',
littleTitle: '控制臺(tái)',
items: [{
iconName: 'home',
name: '首頁(yè)',
routerName: 'index',
disabled: false
}, {
iconName: 'img',
name: '圖片管理',
submenu: [{
iconName: 'img',
name: '圖片一',
routerName: 'img1',
disabled: false
}, {
iconName: 'img',
name: '圖片二',
routerName: 'img2',
disabled: false
}, {
iconName: 'img',
name: '圖片三管理',
submenu: [{
iconName: 'img',
name: '圖片三',
routerName: 'img1',
disabled: true
}]
}]
},
{
iconName: 'collection',
name: '收藏管理',
submenu: [{
iconName: 'collection',
name: '收藏',
routerName: 'collect',
disabled: false
}]
},
{
iconName: 'about',
name: '設(shè)置',
routerName: 'set',
disabled: false
}
]
}
export default mu;
- 重新寫(xiě)菜單組件：
<div class="menu-nav-header">
<span>{{isCollapse?littleTitle:longTitle}}</span>
</div>
<el-menu active-text-color="#fff" background-color="#263238" class="el-menu-vertical-demo"
:collapse-transition="false" text-color="#96a4ab " @open="handleOpen"
@close="handleClose" :collapse="isCollapse">
<template v-for="(item,index) in menus">
<el-menu-item v-if="!item.submenu" :index="index" @click="$router.push({ name: item.routerName })" :disabled="item.disabled">
<SvgIcon :name="item.iconName" class="icon-svg" />
<span slot=""> {{item.name}}</span>
</el-menu-item>
<el-sub-menu v-else :index="index">
<template #title>
<SvgIcon :name="item.iconName" class="icon-svg" />
<span slot=""> {{item.name}}</span>
</template>
<template v-for="(submenuItem,submenuIndex) in item.submenu">
<el-menu-item v-if="!submenuItem.submenu" :index="index+'-'+submenuIndex" :disabled="submenuItem.disabled"
@click="$router.push({ name: submenuItem.routerName })">
<SvgIcon :name="submenuItem.iconName" class="icon-svg" />
<span slot=""> {{submenuItem.name}}</span>
</el-menu-item>
<el-sub-menu v-else :index="index+'-'+submenuIndex">
<template #title>
<SvgIcon :name="submenuItem.iconName" class="icon-svg" />
<span slot=""> {{submenuItem.name}}</span>
</template>
<el-menu-item v-for="(item3,index3) in submenuItem.submenu" :index="index" :disabled="item3.disabled"
@click="$router.push({ name: item3.routerName })">
<SvgIcon :name="item3.iconName" class="icon-svg" />
<span slot=""> {{item3.name}}</span>
</el-menu-item>
</el-sub-menu>
</template>
</el-sub-menu>
</template>
</el-menu>只嵌套了三級(jí)子菜單，如果有更多級(jí)子菜單，需要在組件中再嵌套多個(gè)for循環(huán)即可。
- script代碼中首先導(dǎo)入menu
import mu from '../router/menu/menu.js';
- ?在created中調(diào)用
?這樣，修改菜單欄就只需要在menu.js進(jìn)行編輯了，不再需要修改頁(yè)面代碼。
（八）、添加面包屑
- 頁(yè)面中加入面包屑組件：
<el-breadcrumb separator="/">
<el-breadcrumb-item v-if="!breadcrumbList.size && breadcrumbList[0]!='首頁(yè)'" :to="{ name: 'index' }">
首頁(yè)
</el-breadcrumb-item>
<el-breadcrumb-item v-for="it in breadcrumbList">{{it}}</el-breadcrumb-item>
</el-breadcrumb>- 在created中，將菜單欄集合做下處理，處理成下面格式：
{
"首頁(yè)":["首頁(yè)"],
"圖片一":["圖片管理","圖片一"],
......
}- 代碼：
//菜單項(xiàng)層級(jí)處理，做一個(gè)面包屑集合保存
var mus=that.menus
for (let i1 of mus) {
if (i1.submenu) {
for (let i2 of i1.submenu) {
if (i2.submenu) {
for (let i3 of i2.submenu) {
if (!i3.submenu) {
that.breadcrumbObj[i3.name] = [i1.name, i2.name, i3.name];
}
}
} else {
that.breadcrumbObj[i2.name] = [i1.name, i2.name];
console.log(i2.name)
}
}
} else {
that.breadcrumbObj[i1.name] = [i1.name];
console.log(i1.name)
}
}路由發(fā)生變化時(shí)賦值，在watch中加入：
this.breadcrumbList = this.breadcrumbObj[to.meta.title]
注意：路由中的name要與菜單中的name保持一致。文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-423385.html
四、結(jié)尾
到這里，一個(gè)簡(jiǎn)單的管理后臺(tái)基礎(chǔ)模板就完成了，源代碼拿走不謝，碼字不易，既然看到了這里，點(diǎn)個(gè)贊再走吧。文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-423385.html
到了這里，關(guān)于vue系列（三）——手把手教你搭建一個(gè)vue3管理后臺(tái)基礎(chǔ)模板的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
