Main.js

9种响应式面包屑导航和分步导航指示器UI设计
```

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 实现面包屑导航栏的更多相关文章

  1. vue 在safari动态多级面包屑导航样式不刷新的bug

    前言: 最近做公司的管理系统,用到了elementUI 里面的 bread面包屑组件,本来一切好好的,谁知道mac的safari样式全部缓存了,硬是下面这种效果,真头疼 而chrome,QQ均显示正常 ...

  2. CSS 面包屑导航栏

    做之前,先看一下效果图. demo01.png 首先,书写好 HTML 代码. <div id="crumbs"> <ul> <li><a ...

  3. Bootstrap <基础十八>面包屑导航(Breadcrumbs)

    面包屑导航(Breadcrumbs)是一种基于网站层次信息的显示方式.以博客为例,面包屑导航可以显示发布日期.类别或标签.它们表示当前页面在导航层次结构内的位置. Bootstrap 中的面包屑导航( ...

  4. 学习使用 CSS3 制作网站面包屑导航效果

    作为最重要的导航展示形式之一,面包屑导航能够让用户更清楚的知道他们所在页面的层次结构,让他们可以方便的导航到上一层页面.在本教程中,您将学习如何使用 CSS3 技术创建自己的面包屑导航效果. 效果演示 ...

  5. Bootstrap (导航、标签、面包屑导航)

    导航 Bootstrap中可用的导航有相似的标记,用基类.nav开头,这是相似的部分.改变修饰类可以改变样式. <!DOCTYPE html> <html> <head& ...

  6. WordPress 添加面包屑导航

    所谓面包屑,就是类似这种:首页 > 公司简介 > 发展历史 展示网站树型结构,并让网站访问者随时知道自己所处的位置,方便返回上几级. 将下面的代码添加到主题的 functions.php ...

  7. MVC 5 + EF6 入门完整教程14 -- 动态生成面包屑导航

    上篇文章我们完成了 动态生成多级菜单 这个实用组件. 本篇文章我们要开发另一个实用组件:面包屑导航. 面包屑导航(BreadcrumbNavigation)这个概念来自童话故事"汉赛尔和格莱 ...

  8. 夺命雷公狗ThinkPHP项目之----企业网站25之网站前台面包屑导航URL的完善

    如果想取出面包屑导航的url那么就必须在model层里面进行多取一个了: <?php namespace Home\Model; use Think\Model; class CategoryM ...

  9. 夺命雷公狗ThinkPHP项目之----企业网站24之网站前台列表页面包屑导航的显示

    我们做面包屑导航的原理其实也是很简单的,我们的思路是: 首先找到该分类的id ,我们可以通过大 I来进行获取得到: 然后通过 大 D 方法让数据进入model层里面进行循环迭代查询, 当然,测试时候发 ...

随机推荐

  1. Oracle批量恢复drop操作删除的表、索引等对象

    /**********************************************************************查询Drop操作删除的对象select * from re ...

  2. android之GMS认证

    来到了新的公司,才知道做手机是须要做GMS认证的.于是从一个从没有做过GMS认证的小白到一个月做了8个项目的GMS认证.最后.自己都是吐了.每天晚上都是一个人傻傻在加班.更是知道了高通的支持力度让人发 ...

  3. linux各种IPC机制(进程通信)

    linux各种IPC机制 (2011-07-08 16:58:35)      原文地址:linux各种IPC机制(转)作者:jianpengliu 原帖发表在IBM的developerworks网站 ...

  4. pcm数据生成wav文件

    Qt由pcm数据生成wav文件 void AudioGrabber::saveWave(const QString &fileName, const QByteArray &raw, ...

  5. the solution of CountNonDivisible by Codility

    question:https://codility.com/programmers/lessons/9 To solve this question , I get each element's di ...

  6. 好记性不如烂笔头——.NET运行原理

    WINDOWS中运行的代码,分为托管代码和非托管代码. .NET环境中运行的代码就是托管代码,.NET环境外运行的就是非托管代码. 我们开发的时候,会对源代码进行编译.但其实,对于托管代码,我们编译出 ...

  7. luogu1052 过河

    题目大意 在河上有一座独木桥,一只青蛙想沿着独木桥从河的一侧跳到另一侧.在桥上有一些石子,青蛙很讨厌踩在这些石子上.由于桥的长度和青蛙一次跳过的距离都是正整数,我们可以把独木桥上青蛙可能到达的点看成数 ...

  8. C# winform窗体在桌面右下角显示(任务栏上方)

    问题描述: 有一个主窗口程序,需要给该程序添加一个通知子窗口.子窗口的位置为右下角. 解决方法: 在子窗口frmPopMsg的代码文件中添加如下代码: public frmPopMsg() { Ini ...

  9. Elias-Fano编码算法——倒排索引压缩用,本质上就是桶排序数据结构思路

    Elias-Fano编码过程如下:把一组整数的最低l位连接在一起,同时把高位以严格单调增的排序划分为桶. Example: 2, 3, 5, 7, 11, 13, 24 Count in unary ...

  10. bzoj4977 跳伞求生——贪心

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=4977 今天讲的贪心题,真神奇啊: 首先,要得到尽量多选队友的解: 把队友按 a[i] 从小到 ...