vue 2.0 + elementUI 实现面包屑导航栏

cloud 发布于2019-08-26 11:46 / 2310人阅读

摘要：如果存在路由列表，则把之后的路由都删掉登录在要使用的组件中使用或者均可。需要注意的是，此时访问不到。而这个钩子就会在这个情况下被调用。可以访问组件实例导航离开该组件的对应路由时调用可以访问组件实例参考资料

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 导航栏

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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