vue 2.0 + elementUI 實現面包屑導航欄

cloud 發布于2019-08-26 11:46 / 2318人閱讀

摘要：如果存在路由列表，則把之后的路由都刪掉登錄在要使用的組件中使用或者均可。需要注意的是，此時訪問不到。而這個鉤子就會在這個情況下被調用。可以訪問組件實例導航離開該組件的對應路由時調用可以訪問組件實例參考資料

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 此時訪問不到this。

官網描述 https://router.vuejs.org/zh-c...

const Foo = {
  template: `...`,
  beforeRouteEnter (to, from, next) {
    // 在渲染該組件的對應路由被 confirm 前調用
    // 不！能！獲取組件實例 `this`
    // 因為當守衛執行前，組件實例還沒被創建
  },
  beforeRouteUpdate (to, from, next) {
    // 在當前路由改變，但是該組件被復用時調用
    // 舉例來說，對于一個帶有動態參數的路徑 /foo/:id，在 /foo/1 和 /foo/2 之間跳轉的時候，
    // 由于會渲染同樣的 Foo 組件，因此組件實例會被復用。而這個鉤子就會在這個情況下被調用。
    // 可以訪問組件實例 `this`
  },
  beforeRouteLeave (to, from, next) {
    // 導航離開該組件的對應路由時調用
    // 可以訪問組件實例 `this`
  }
}

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

云服務器 GPU云服務器 html 面包屑導航頁面導航面包導航 vue.js 2.0 cdn 導航欄

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/107541.html

在線考試系統（vue2 + elementui + express4 + MongoDB）

摘要：在實際開發過程中發現，考試系統各個表集合都是需要關聯，這種非關系型數據庫，做起來反而麻煩了不少。數據中既有試卷的信息，也有很多題目。題目都屬于該試卷，改試卷又屬于當前登錄系統的老師即創建試卷的老師。這是我畢業項目，從0到1，前后臺獨立開發完成。功能不多，在此記錄,溫故而知新！項目github地址:https://github.com/FinGet/Exam ，博客地址：https:/...

warmcheng 2019-06-26 17:39 評論0 收藏0
TOB主題2.7版本更新：重做文章主列表、新增菜單圖標支持、面包屑、彩色標簽、縮略圖圓角

摘要：主題版本更新重做文章主列表新增菜單圖標支持面包屑彩色標簽縮略圖圓角支持中文和英文，支持百度收錄，適用于各種圖片展示網站新聞站電影站美圖站資源站等等，扁平化設計公眾號展示打賞功能列表無限加載全屏相冊展示。TOB主題2.7版本更新：重做文章主列表、新增菜單圖標支持、面包屑、彩色標簽、縮略圖圓角！支持中文和英文，支持百度收錄，適用于各種圖片展示網站、新聞站、電影站、美圖站、資源站等等，扁平化設計、...

rose 2021-09-07 10:12 評論0 收藏0
vue遞歸組件實現elementUI多級菜單

　　效果展示：　　一、子組件　　<template> 　　<divclass="myDiv"> 　　 　　<templatev-for="(item,i)inlistAll"> 　　<!--有child就顯示child的下拉型菜單，有小箭頭...

3403771864 2022-09-12 20:00 評論0 收藏0
Vue + Vue-router + Element-ui 搭建一個非常簡單的dashboard d

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

Near_Li 2019-08-21 17:38 評論0 收藏0
網頁頂部導航欄加強（分為左右兩部分；添加一個不被污染樣式的搜索框）

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

yedf 2019-08-30 15:44 評論0 收藏0