新聞中心
這篇文章主要為大家展示了“vue2.0中elementUI如何制作面包屑導(dǎo)航欄”,內(nèi)容簡而易懂,條理清晰,希望能夠幫助大家解決疑惑,下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“vue2.0中elementUI如何制作面包屑導(dǎo)航欄”這篇文章吧。
創(chuàng)新互聯(lián)專注于企業(yè)成都全網(wǎng)營銷、網(wǎng)站重做改版、樂平網(wǎng)站定制設(shè)計、自適應(yīng)品牌網(wǎng)站建設(shè)、HTML5、商城網(wǎng)站開發(fā)、集團(tuán)公司官網(wǎng)建設(shè)、外貿(mào)網(wǎng)站制作、高端網(wǎng)站制作、響應(yīng)式網(wǎng)頁設(shè)計等建站業(yè)務(wù),價格優(yōu)惠性價比高,為樂平等各大城市提供網(wǎng)站開發(fā)制作服務(wù)。
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、在要使用的組件中
{{item.name}}
用 watch 或者 beforeRouteEnter 均可。
需要注意的是,beforeRouteEnter 此時訪問不到this。
const Foo = { template: `...`, beforeRouteEnter (to, from, next) { // 在渲染該組件的對應(yīng)路由被 confirm 前調(diào)用 // 不!能!獲取組件實(shí)例 `this` // 因?yàn)楫?dāng)守衛(wèi)執(zhí)行前,組件實(shí)例還沒被創(chuàng)建 }, beforeRouteUpdate (to, from, next) { // 在當(dāng)前路由改變,但是該組件被復(fù)用時調(diào)用 // 舉例來說,對于一個帶有動態(tài)參數(shù)的路徑 /foo/:id,在 /foo/1 和 /foo/2 之間跳轉(zhuǎn)的時候, // 由于會渲染同樣的 Foo 組件,因此組件實(shí)例會被復(fù)用。而這個鉤子就會在這個情況下被調(diào)用。 // 可以訪問組件實(shí)例 `this` }, beforeRouteLeave (to, from, next) { // 導(dǎo)航離開該組件的對應(yīng)路由時調(diào)用 // 可以訪問組件實(shí)例 `this` } }
以上是“vue2.0中elementUI如何制作面包屑導(dǎo)航欄”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內(nèi)容對大家有所幫助,如果還想學(xué)習(xí)更多知識,歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道!
文章標(biāo)題:vue2.0中elementUI如何制作面包屑導(dǎo)航欄
URL分享:http://fisionsoft.com.cn/article/pgdsdg.html