vue 2.0 + elementUI 实现面包屑导航栏
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()
});
<p><strong>2、在要使用的组件中</strong></p>
<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>
<p>使用 watch 或者 beforeRouteEnter 均可。 <br>需要注意的是,beforeRouteEnter 此时访问不到this。</p>
<p><strong>官网描述</strong> <a href="https://router.vuejs.org/zh-cn/advanced/navigation-guards.html" rel="nofollow noreferrer">https://router.vuejs.org/zh-c...</a></p>
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
}
}
<p>参考资料:<br><a href="https://router.vuejs.org/zh-cn/advanced/navigation-guards.html" rel="nofollow noreferrer">https://router.vuejs.org/zh-c...</a><br><a href="https://segmentfault.com/q/1010000011795481/a-1020000011795530">https://segmentfault.com/q/10...</a></p>
原文地址:https://segmentfault.com/a/1190000013315587
vue 2.0 + elementUI 实现面包屑导航栏的更多相关文章
- vue 在safari动态多级面包屑导航样式不刷新的bug
前言: 最近做公司的管理系统,用到了elementUI 里面的 bread面包屑组件,本来一切好好的,谁知道mac的safari样式全部缓存了,硬是下面这种效果,真头疼 而chrome,QQ均显示正常 ...
- CSS 面包屑导航栏
做之前,先看一下效果图. demo01.png 首先,书写好 HTML 代码. <div id="crumbs"> <ul> <li><a ...
- Bootstrap <基础十八>面包屑导航(Breadcrumbs)
面包屑导航(Breadcrumbs)是一种基于网站层次信息的显示方式.以博客为例,面包屑导航可以显示发布日期.类别或标签.它们表示当前页面在导航层次结构内的位置. Bootstrap 中的面包屑导航( ...
- 学习使用 CSS3 制作网站面包屑导航效果
作为最重要的导航展示形式之一,面包屑导航能够让用户更清楚的知道他们所在页面的层次结构,让他们可以方便的导航到上一层页面.在本教程中,您将学习如何使用 CSS3 技术创建自己的面包屑导航效果. 效果演示 ...
- Bootstrap (导航、标签、面包屑导航)
导航 Bootstrap中可用的导航有相似的标记,用基类.nav开头,这是相似的部分.改变修饰类可以改变样式. <!DOCTYPE html> <html> <head& ...
- WordPress 添加面包屑导航
所谓面包屑,就是类似这种:首页 > 公司简介 > 发展历史 展示网站树型结构,并让网站访问者随时知道自己所处的位置,方便返回上几级. 将下面的代码添加到主题的 functions.php ...
- MVC 5 + EF6 入门完整教程14 -- 动态生成面包屑导航
上篇文章我们完成了 动态生成多级菜单 这个实用组件. 本篇文章我们要开发另一个实用组件:面包屑导航. 面包屑导航(BreadcrumbNavigation)这个概念来自童话故事"汉赛尔和格莱 ...
- 夺命雷公狗ThinkPHP项目之----企业网站25之网站前台面包屑导航URL的完善
如果想取出面包屑导航的url那么就必须在model层里面进行多取一个了: <?php namespace Home\Model; use Think\Model; class CategoryM ...
- 夺命雷公狗ThinkPHP项目之----企业网站24之网站前台列表页面包屑导航的显示
我们做面包屑导航的原理其实也是很简单的,我们的思路是: 首先找到该分类的id ,我们可以通过大 I来进行获取得到: 然后通过 大 D 方法让数据进入model层里面进行循环迭代查询, 当然,测试时候发 ...
随机推荐
- Oracle批量恢复drop操作删除的表、索引等对象
/**********************************************************************查询Drop操作删除的对象select * from re ...
- android之GMS认证
来到了新的公司,才知道做手机是须要做GMS认证的.于是从一个从没有做过GMS认证的小白到一个月做了8个项目的GMS认证.最后.自己都是吐了.每天晚上都是一个人傻傻在加班.更是知道了高通的支持力度让人发 ...
- linux各种IPC机制(进程通信)
linux各种IPC机制 (2011-07-08 16:58:35) 原文地址:linux各种IPC机制(转)作者:jianpengliu 原帖发表在IBM的developerworks网站 ...
- pcm数据生成wav文件
Qt由pcm数据生成wav文件 void AudioGrabber::saveWave(const QString &fileName, const QByteArray &raw, ...
- the solution of CountNonDivisible by Codility
question:https://codility.com/programmers/lessons/9 To solve this question , I get each element's di ...
- 好记性不如烂笔头——.NET运行原理
WINDOWS中运行的代码,分为托管代码和非托管代码. .NET环境中运行的代码就是托管代码,.NET环境外运行的就是非托管代码. 我们开发的时候,会对源代码进行编译.但其实,对于托管代码,我们编译出 ...
- luogu1052 过河
题目大意 在河上有一座独木桥,一只青蛙想沿着独木桥从河的一侧跳到另一侧.在桥上有一些石子,青蛙很讨厌踩在这些石子上.由于桥的长度和青蛙一次跳过的距离都是正整数,我们可以把独木桥上青蛙可能到达的点看成数 ...
- C# winform窗体在桌面右下角显示(任务栏上方)
问题描述: 有一个主窗口程序,需要给该程序添加一个通知子窗口.子窗口的位置为右下角. 解决方法: 在子窗口frmPopMsg的代码文件中添加如下代码: public frmPopMsg() { Ini ...
- Elias-Fano编码算法——倒排索引压缩用,本质上就是桶排序数据结构思路
Elias-Fano编码过程如下:把一组整数的最低l位连接在一起,同时把高位以严格单调增的排序划分为桶. Example: 2, 3, 5, 7, 11, 13, 24 Count in unary ...
- bzoj4977 跳伞求生——贪心
题目:https://www.lydsy.com/JudgeOnline/problem.php?id=4977 今天讲的贪心题,真神奇啊: 首先,要得到尽量多选队友的解: 把队友按 a[i] 从小到 ...