国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

vue 2.0 + elementUI 實(shí)現(xiàn)面包屑導(dǎo)航欄

cloud / 2322人閱讀

摘要：如果存在路由列表，則把之后的路由都刪掉登錄在要使用的組件中使用或者均可。需要注意的是，此時(shí)訪問(wèn)不到。而這個(gè)鉤子就會(huì)在這個(gè)情況下被調(diào)用。可以訪問(wèn)組件實(shí)例導(dǎo)航離開(kāi)該組件的對(duì)應(yīng)路由時(shí)調(diào)用可以訪問(wèn)組件實(shí)例參考資料

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、在要使用的組件中

使用 watch 或者 beforeRouteEnter 均可。
需要注意的是，beforeRouteEnter 此時(shí)訪問(wèn)不到this。

官網(wǎng)描述 https://router.vuejs.org/zh-c...

const Foo = {
  template: `...`,
  beforeRouteEnter (to, from, next) {
    // 在渲染該組件的對(duì)應(yīng)路由被 confirm 前調(diào)用
    // 不！能！獲取組件實(shí)例 `this`
    // 因?yàn)楫?dāng)守衛(wèi)執(zhí)行前，組件實(shí)例還沒(méi)被創(chuàng)建
  },
  beforeRouteUpdate (to, from, next) {
    // 在當(dāng)前路由改變，但是該組件被復(fù)用時(shí)調(diào)用
    // 舉例來(lái)說(shuō)，對(duì)于一個(gè)帶有動(dòng)態(tài)參數(shù)的路徑 /foo/:id，在 /foo/1 和 /foo/2 之間跳轉(zhuǎn)的時(shí)候，
    // 由于會(huì)渲染同樣的 Foo 組件，因此組件實(shí)例會(huì)被復(fù)用。而這個(gè)鉤子就會(huì)在這個(gè)情況下被調(diào)用。
    // 可以訪問(wèn)組件實(shí)例 `this`
  },
  beforeRouteLeave (to, from, next) {
    // 導(dǎo)航離開(kāi)該組件的對(duì)應(yīng)路由時(shí)調(diào)用
    // 可以訪問(wèn)組件實(shí)例 `this`
  }
}

參考資料:
https://router.vuejs.org/zh-c...
https://segmentfault.com/q/10...

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/107541.html

相關(guān)文章

  • 在線考試系統(tǒng)（vue2 + elementui + express4 + MongoDB）

    摘要：在實(shí)際開(kāi)發(fā)過(guò)程中發(fā)現(xiàn)，考試系統(tǒng)各個(gè)表集合都是需要關(guān)聯(lián)，這種非關(guān)系型數(shù)據(jù)庫(kù)，做起來(lái)反而麻煩了不少。數(shù)據(jù)中既有試卷的信息，也有很多題目。題目都屬于該試卷，改試卷又屬于當(dāng)前登錄系統(tǒng)的老師即創(chuàng)建試卷的老師。 這是我畢業(yè)項(xiàng)目，從0到1，前后臺(tái)獨(dú)立開(kāi)發(fā)完成。功能不多，在此記錄,溫故而知新！項(xiàng)目github地址:https://github.com/FinGet/Exam ，博客地址：https:/...

    warmcheng 評(píng)論0 收藏0

  • TOB主題2.7版本更新：重做文章主列表、新增菜單圖標(biāo)支持、面包屑、彩色標(biāo)簽、縮略圖圓角

    摘要：主題版本更新重做文章主列表新增菜單圖標(biāo)支持面包屑彩色標(biāo)簽縮略圖圓角支持中文和英文，支持百度收錄，適用于各種圖片展示網(wǎng)站新聞?wù)倦娪罢久缊D站資源站等等，扁平化設(shè)計(jì)公眾號(hào)展示打賞功能列表無(wú)限加載全屏相冊(cè)展示。TOB主題2.7版本更新：重做文章主列表、新增菜單圖標(biāo)支持、面包屑、彩色標(biāo)簽、縮略圖圓角！支持中文和英文，支持百度收錄，適用于各種圖片展示網(wǎng)站、新聞?wù)尽㈦娪罢尽⒚缊D站、資源站等等，扁平化設(shè)計(jì)、...

    rose 評(píng)論0 收藏0

  • vue遞歸組件實(shí)現(xiàn)elementUI多級(jí)菜單

    　　效果展示：　　一、子組件　　<template> 　　<divclass="myDiv"> 　　<!--這里的listAll用于接收父組件傳遞進(jìn)來(lái)的菜單列表--> 　　<templatev-for="(item,i)inlistAll"> 　　<!--有child就顯示child的下拉型菜單，有小箭頭...

    3403771864 評(píng)論0 收藏0

  • Vue + Vue-router + Element-ui 搭建一個(gè)非常簡(jiǎn)單的dashboard d

    摘要：但是有邊框，不好看啊再次美化使用使用圖標(biāo)庫(kù)安裝這里主要貼一下的改動(dòng)，其他的代碼就不貼了看下效果圖標(biāo)什么的都有了。另外文件需要加上看看效果點(diǎn)擊菜單，路徑跳轉(zhuǎn)，并且每次都是單獨(dú)去加載路由的文件。 做完這個(gè)demo后，我體會(huì)到，Vue組件化，webpack, Vue-router等，并不是很難學(xué)習(xí)，你需要的只是拿起斧頭的勇氣在做demo的過(guò)程中，我遇到一個(gè)問(wèn)題，就是vue-router懶加載...

    Near_Li 評(píng)論0 收藏0

  • 網(wǎng)頁(yè)頂部導(dǎo)航欄加強(qiáng)（分為左右兩部分；添加一個(gè)不被污染樣式的搜索框）

    摘要：目標(biāo)中間一段空白把導(dǎo)航欄分為左右兩個(gè)部分在導(dǎo)航欄上加上一個(gè)搜索框，但不被的樣式污染。 前置 本文需要對(duì)CSS，Vue，ElementUI有基本的了解。 本文以ElementUI提供的導(dǎo)航菜單組件為基礎(chǔ)。 本文希望能在此組件基礎(chǔ)上實(shí)現(xiàn)以下內(nèi)容： 中間一段空白把導(dǎo)航欄分為左右兩個(gè)部分 在導(dǎo)航欄上加上一個(gè)搜索框，但不被 el-menu-item 的樣式污染。 先研究清楚ElementUI...

    yedf 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<