How to make bread crumbs navigation bar with elementUI in vue2.0

This article mainly explains "how to make breadcrumb navigation bar in elementUI in vue2.0". Interested friends may wish to have a look. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn "how to make bread crumbs navigation bar with elementUI in vue2.0".

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、在要使用的组件中 {{item.name}} 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; / /} /}}

You can use either watch or beforeRouteEnter.

It is important to note that beforeRouteEnter cannot access this at this time.

Const Foo = {template: `...`, beforeRouteEnter (to, from, next) {/ / call / / No before rendering the corresponding route for this component by confirm! Yes! Get component instance `this` / / because the component instance has not been created before the guard executes}, beforeRouteUpdate (to, from, next) {/ / changes the current route, but the component is called / / for example, for a path / foo/:id with dynamic parameters, when you jump between / foo/1 and / foo/2, / / because the same Foo component will be rendered So the component instance is reused. And this hook will be called in this case. / / you can access the component instance `this`}, beforeRouteLeave (to, from, next) {/ / call / / you can access the component instance `this`} when you navigate away from the corresponding route of the component. I believe everyone has a better understanding of "how to make breadcrumb navigation bar in vue2.0". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!