vue project to realize breadcrumb navigation

Recently, after I joined the new company, I started the reconstruction work of vue meeting management system. In the process of writing blog, the time of writing blog is also very few. Today, the back-end students debug the code. Taking advantage of this time, I decided to write a blog about the realization of bread crumb navigation function, which is a learning record in the project. First of all, let's go to the effect picture

Breadcrumb.vue Component full code:

<template>
  <el-breadcrumb separator="/">
    <el-breadcrumb-item
      v-for="(item, index) in breadList"
      :key="index"
      :to="{ path: item.path }"
    >
      {{ item.meta.title }}
    </el-breadcrumb-item>
  </el-breadcrumb>
</template>

<script>
export default {
  data() {
    return {
      breadList: []
    }
  },
  watch: {
    $route() {
      //   console.log(this.$route.matched)
      this.setBreadList()
    }
  },
  methods: {
    // Judge whether the current route is the home page
    isIndex(route) {
      return route.name === 'index'
    },
    setBreadList() {
      let matched = this.$route.matched
      // The reason why it is matched[1] is that item 0 is the Home routing information of the parent container
      if (!this.isIndex(matched[1])) {
        // If it is not the home page, we need to splice the routing information of an index in the current list item
        // The. fliter() section filters out the item with name home, because we don't want it added to our navigation
        matched = [{ path: '/index',meta:{title:'home page'}}].concat(matched)
        //  If it's the first
      }
      // We don't want the home route to appear in the breadcrumb navigation, so we filter out the item with the name 'home'
      this.breadList = matched.filter(item => item.name !== 'home')
    }
  },
  created() {
    this.setBreadList()
  }
}
</script>

For many routing items, I used to configure the router as a whole

import Vue from 'vue'
import Router from 'vue-router'
import Home from '../views/Home'
import Index from '../views/Index'
import FloorManagement from '../views/FloorManagement'
import ConferenceList from '../views/Conference'

export default new Router({
   routes:[
   	{
   	    path:'/',
   	    name:'home',
   	    redirect:'/index',
   	    component:Home
   	    children:[
   			{
   				path:'index',
   				name:'index'
   				component:Index		//For the demonstration here, we will not use route lazy loading
   			},
   			{
   				path:'floorManagement',
   				name:'floorManagement'
   				component:FloorManager		
   			},
   			{
   				path:'conferenceList',
   				name:'conferenceList'
   				component:ConferenceList	
   			}
   		]
       }
   ]
})

As mentioned above, the Home component serves as a container for the entire project page, and other routing pages, such as index and floorManagement components, are nested as subroutes.

The breadcrumb navigation is in the Home component, so the first and the most... em, the dumbest way to do it - write it on every page.

By looking up the Vue router document, I found the following api:

So we can't see the effect. We'd better print it out to see the effect. There's no need to mention the routing setup in the front

  • New under components folder Breadcrumb.vue assembly
<template>
  <div></div>
</template>

<script>
export default {
  watch: {
    $route() {
      console.log(this.$route.matched)
    }
  }
}
</script>

<style lang="scss" scoped></style>

In the Breadcrumb component above, I listen to the $route property through watch. When the property changes, it will trigger the console.log (this.$ route.matched )This line of code prints matched

Suppose we click on the floor management navigation bar, and print the result as follows, and save the array with all routing nested records

If you know that it is an array, it is easy to handle. Next, we mainly focus on the function implementation of Breadcrumb bread crumb component

  • Breadcurmb.vue
<template>
  <el-breadcrumb separator="/">
    <el-breadcrumb-item
      v-for="(item, index) in breadList"
      :key="index"
      :to="{ path: item.path }"
    >
      {{ item.name }}
    </el-breadcrumb-item>
  </el-breadcrumb>
</template>

<script>
export default {
  data() {
    return {
      breadList: []
    }
  },
  watch: {
    $route() {
      //   console.log(this.$route.matched)
      this.setBreadList()
    }
  },
  methods: {
    // Determine whether the current route is the home page
    isIndex(route) {
      return route.name === 'index'
    },
    setBreadList() {
      let matched = this.$route.matched
      // The reason why it is matched[1] is that item 0 is the Home routing information of the parent container
      if (!this.isIndex(matched[1])) {
        // If it is not the home page, we need to splice the routing information of an index in the current list item
        matched = [{ path: '/index' }].concat(matched)
      }
      this.breadList = matched
    }
  },
  created() {
    this.setBreadList()
  }
}
</script>

Is this over? Let's test it. The effect picture is as follows:

As mentioned above, although it has been initially realized, there are three problems that need to be further dealt with

1. We want the breadcrumbs to be displayed in Chinese instead of English
2. We do not want to display the parent container home, but the type of "home / floor management"
3. If the current routing page is already the home page, we hope it only displays the "home page"

Don't worry. Let's solve the problem one by one
For the first question, we have to understand the meta magic of Vue router
Please refer to: Vue router routing meta information
We can add the following data to router route:

  • router/index.js folder
export default new Router({
   routes:[
   	{
   	    path:'/',
   	    name:'home',
   	    redirect:'/index',
   	    component:Home
   	    children:[
   			{
   				path:'index',
   				name:'index'
   				component:Index,		//The demonstration here will not use routing lazy loading
   				meta:{title:'home page'}
   			},
   			{
   				path:'floorManagement',
   				name:'floorManagement'
   				component:FloorManager,
   				meta:{title:'Floor management'}		
   			},
   			{
   				path:'conferenceList',
   				name:'conferenceList'
   				component:ConferenceList,
   				meta:{title:'Meeting list'}	
   			}
   		]
       }
   ]
})

We add meta information meta:{title: 'xxx'} for each route
Make the following changes in Breadcrumb:

The first step is to solve the following two problems:
Supplement setBreadLis

  • Breadcrumb.vue Document:
 export default {
  data() {
    return {
      breadList: []
    }
  },
  watch: {
    $route() {
      //   console.log(this.$route.matched)
      this.setBreadList()
    }
  },
  methods: {
    // Judge whether the current route is the home page
    isIndex(route) {
      return route.name === 'index'
    },
    setBreadList() {
      let matched = this.$route.matched
      // The reason why it is matched[1] is that item 0 is the Home routing information of the parent container
      if (!this.isIndex(matched[1])) {
        // If it is not the home page, we need to splice the routing information of an index in the current list item
        // The. fliter() section filters out the item with name home, because we don't want it added to our navigation
        matched = [{ path: '/index',meta:{title:'home page'}}].concat(matched)
        //  If it's the first
      }
      // We don't want home to appear in breadcrumb navigation, so we filter out the one with the name 'home'
      this.breadList = matched.filter(item => item.name !== 'home')
    }
  },
  created() {
    this.setBreadList()
  }
}
</script>

ok, finish, that's it!

Tags: Vue

Posted on Mon, 29 Jun 2020 03:52:36 -0400 by clodagh2000