您好,登錄后才能下訂單哦!
這篇文章將為大家詳細(xì)講解有關(guān)怎么在Vue中使用eiement動(dòng)態(tài)路由,文章內(nèi)容質(zhì)量較高,因此小編分享給大家做個(gè)參考,希望大家閱讀完這篇文章后對(duì)相關(guān)知識(shí)有一定的了解。
1.要實(shí)現(xiàn)動(dòng)態(tài)路由,只需要在main.js中將所有路由表先規(guī)定好,如下
const routes=[ {path:'/login',component:login},/*登錄*/ {path:'/home',component:home},/*首頁*/ {path:'/monitor',component:monitor},/*實(shí)時(shí)監(jiān)控*/ {path: "/orderQuery", component: orderQuery},/*電子圍欄*/ {path: "/fenceSet", component: fenceSet},/*電子圍欄*/ {path:'/orderCenter',component:orderCenter},/*訂單中心*/ {path:'/carctlExamine',component:carctlExamine},/*車管員審批*/ {path:'/partExamine',component:partExamine},/*部門領(lǐng)導(dǎo)審批*/ {path:'/vpExamine',component:vpExamine},/*副總審批*/ {path:'/distribute',component:distribute},/*調(diào)度派單*/ {path:'/receipt',component:receipt},/*回執(zhí)*/ {path:'/trajectory',component:trajectory},/*軌跡回放*/ {path:'/statistics',component:statistics },/*統(tǒng)計(jì)*/ {path:'/car',component:car},/*車輛管理*/ {path:'/user',component:user},/*用戶管理*/ {path:'/equipment',component:equipment},/*設(shè)備管理*/ {path:'/group',component:group},/*小組維護(hù)*/ {path:'/driver',component:driver},/*駕駛員管理*/ {path: '/company', component: company},/*公司管理*/ {path: '/adminManage', component: adminManage},/*公司員管理*/ {path: '/roleManage', component: roleManage},/*角色管理*/ {path:'/systemDaily',component:systemDaily },/*系統(tǒng)日志*/ ];
2.把前端路由表發(fā)給后臺(tái)和后臺(tái)協(xié)商返回的數(shù)據(jù)形式,在app.vue中,使用《el=menu》循環(huán)出來后臺(tái)返回的路由表如下
<el-menu :default-active="$route.path" class="el-menu-demo" mode="horizontal" @select="handleSelect" background-color="#545c64" text-color="#fff" active-text-color="#85ffca"> <el-menu-item :index="item.path" v-for="item in pathList" v-if="item.path!=null" :key="item.id" > <router-link :to="item.path">{{item.name}}</router-link> </el-menu-item>/*一級(jí)導(dǎo)航*/ <el-submenu v-if="item.path==null" :key="item.id":index="item.name" v-for="item in pathList"> <template slot="title">{{item.name}}</template> <el-menu-item v-for="child in item.children" :index="child.path" :key="child.id" v-if="child.path!=null" >/*二級(jí)導(dǎo)航*/ <router-link :to="child.path">{{child.name}}</router-link> </el-menu-item> <el-submenu v-if="child.children!=[]&&child.path==null" v-for="child in item.children":key="child.id":index="child.name" > <template slot="title">{{child.name}}</template> <el-menu-item v-for="three in child.children":index="three.path":key="three.id">/*若存在三級(jí)導(dǎo)航*/ <router-link :to="three.path">{{three.name}}</router-link> </el-menu-item> </el-submenu> </el-submenu> </el-menu>
Vue是一款友好的、多用途且高性能的JavaScript框架,使用vue可以創(chuàng)建可維護(hù)性和可測(cè)試性更強(qiáng)的代碼庫,Vue允許可以將一個(gè)網(wǎng)頁分割成可復(fù)用的組件,每個(gè)組件都包含屬于自己的HTML、CSS、JavaScript,以用來渲染網(wǎng)頁中相應(yīng)的地方,所以越來越多的前端開發(fā)者使用vue。
關(guān)于怎么在Vue中使用eiement動(dòng)態(tài)路由就分享到這里了,希望以上內(nèi)容可以對(duì)大家有一定的幫助,可以學(xué)到更多知識(shí)。如果覺得文章不錯(cuò),可以把它分享出去讓更多的人看到。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。