Heim  >  Artikel  >  Web-Frontend  >  Erstellen Sie über elementUI in vue2.0 eine Breadcrumb-Navigationsleiste

Erstellen Sie über elementUI in vue2.0 eine Breadcrumb-Navigationsleiste

亚连
亚连Original
2018-06-05 16:05:124606Durchsuche

In diesem Artikel wird hauptsächlich der Prozess der Erstellung einer Breadcrumb-Navigationsleiste mit vue2.0 elementUI im Detail erläutert. Freunde, die daran interessiert sind, können es lernen.

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 != &#39;登录&#39;){
  routeList.push({"name":to.name,"path":to.fullPath});
 }
 to.meta.routeList = routeList;
 next()
});

2. In der zu verwendenden Komponente kann

<template>
  <p class="level-bread">
   <el-breadcrumb separator="/">
    <el-breadcrumb-item v-for="item in realList" :to="item.path">{{item.name}}</el-breadcrumb-item>
   </el-breadcrumb>
  </p>
</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>

mit watch oder verwendet werden beforeRouteEnter.

Es ist zu beachten, dass beforeRouteEnter derzeit nicht darauf zugreifen kann.

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`
 }
}

Ich habe das Obige für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird.

Verwandte Artikel:

Verwenden Sie v-for, um die Methode zum Zuweisen von Werten zum src-Attribut über Vue zu implementieren (ausführliches Tutorial)

Über Vue implementiert v-for die Methode zum Laden lokaler statischer Bilder (detailliertes Tutorial)

So lösen Sie das Problem von Rot und Warnung bei Verwendung von v-for in Vue (detailliert). Tutorial)

Das obige ist der detaillierte Inhalt vonErstellen Sie über elementUI in vue2.0 eine Breadcrumb-Navigationsleiste. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn