您好,登錄后才能下訂單哦!
這篇文章主要介紹了vue怎么制作面包屑導航欄的相關(guān)知識,內(nèi)容詳細易懂,操作簡單快捷,具有一定借鑒價值,相信大家閱讀完這篇vue怎么制作面包屑導航欄文章都會有所收獲,下面我們一起來看看吧。
Main.js
var routeList = []; router.beforeEach((to, from, next) => { var index = -1; for(var i = 0; i < routeList.length; i++) { if(routeList[i].name == to.name) { index = i; break; } } if (index !== -1) { //如果存在路由列表,則把之后的路由都刪掉 routeList.splice(index + 1, routeList.length - index - 1); } else if(to.name != '登錄'){ routeList.push({"name":to.name,"path":to.fullPath}); } to.meta.routeList = routeList; next() });
2、在要使用的組件中
<template> <div class="level-bread"> <el-breadcrumb separator="/"> <el-breadcrumb-item v-for="item in realList" :to="item.path">{{item.name}}</el-breadcrumb-item> </el-breadcrumb> </div> </template> <script> export default { name: "lelve-bread", created(){ this.getRoutePath(); }, data() { return { realList: [] } }, methods:{ getRoutePath() { this.realList = this.$route.meta.routeList; } }, beforeRouteEnter(to,from, next) { next((vm) => { vm.realList = to.meta.routeList; }); }, // watch:{ // $route:function(newV,oldV) { // this.realList =newV.meta.routeList; // } // } } </script>
用 watch 或者 beforeRouteEnter 均可。
需要注意的是,beforeRouteEnter 此時訪問不到this。
const Foo = { template: `...`, beforeRouteEnter (to, from, next) { // 在渲染該組件的對應路由被 confirm 前調(diào)用 // 不!能!獲取組件實例 `this` // 因為當守衛(wèi)執(zhí)行前,組件實例還沒被創(chuàng)建 }, beforeRouteUpdate (to, from, next) { // 在當前路由改變,但是該組件被復用時調(diào)用 // 舉例來說,對于一個帶有動態(tài)參數(shù)的路徑 /foo/:id,在 /foo/1 和 /foo/2 之間跳轉(zhuǎn)的時候, // 由于會渲染同樣的 Foo 組件,因此組件實例會被復用。而這個鉤子就會在這個情況下被調(diào)用。 // 可以訪問組件實例 `this` }, beforeRouteLeave (to, from, next) { // 導航離開該組件的對應路由時調(diào)用 // 可以訪問組件實例 `this` } }
Vue是一款友好的、多用途且高性能的JavaScript框架,使用vue可以創(chuàng)建可維護性和可測試性更強的代碼庫,Vue允許可以將一個網(wǎng)頁分割成可復用的組件,每個組件都包含屬于自己的HTML、CSS、JavaScript,以用來渲染網(wǎng)頁中相應的地方,所以越來越多的前端開發(fā)者使用vue。
關(guān)于“vue怎么制作面包屑導航欄”這篇文章的內(nèi)容就介紹到這里,感謝各位的閱讀!相信大家對“vue怎么制作面包屑導航欄”知識都有一定的了解,大家如果還想學習更多知識,歡迎關(guān)注億速云行業(yè)資訊頻道。
免責聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。