Shulou(Shulou.com)06/03 Report--

This article mainly introduces the vue-router-based matched how to achieve breadcrumb function, has a certain reference value, interested friends can refer to, I hope you can learn a lot after reading this article, the following let the editor take you to understand it.

The details are as follows:

As shown in the picture above, there is a common breadcrumb effect. Generally speaking, the content of breadcrumbs has a certain hierarchical relationship. Taking the above figure as an example, first enter the home page, and then click the left navigation to enter the activity list page under event management. Then click on a piece of data to enter the activity details page.

This is similar to the result obtained by the mached attribute of vue-router, so you can achieve the breadcrumb effect based on it!

Here I use the breadcrumb component and navigation menu component of elementui to post the final effect first:

Routing configuration

Project structure:

The side navigation bar is displayed on the home page, electronic digital, clothing, shoes and hats page, so I created a layout component, pointing the component of these three routes to it, and writing the navigation bar and bread crumbs in the layout component.

Because the implementation of this feature depends on the hierarchical nesting relationship of routing, the routing configuration should be conceived in advance. My routing configuration here is as follows:

Const routes = [/ / match empty route Redirect to root route {path:'', redirect:'/ home', meta: {showInbreadcrumb:false}}, / / root route {path:'/home', component: () = > import ('@ / views/layout/index.vue'), name:'home', meta: {title: "Home" ShowInbreadcrumb:true}, / / Electronic Digital {path:'/electronics', name:' Electronic Digital', component: () = > import ('@ / views/layout/index.vue'), redirect:'/ electronics/computer', meta: {title: "Electronic Digital", showInbreadcrumb:true} Children: [{path:'computer', name:'computer', component () = > import ('@ / views/electronics/children/computer/index.vue'), meta: {title: "computer", showInbreadcrumb:true}} {path:'phone', name:' Mobile', component: () = > import ('@ / views/electronics/children/phone/index.vue'), meta: {title: "Mobile", showInbreadcrumb:true}} {path:'tv', name:' TV', component: () = > import ('@ / views/electronics/children/tv/index.vue'), meta: {title: "TV" ShowInbreadcrumb:true}}]}, / / clothing shoes {path:'/clothing', name:' clothing shoes and hats, component: () = > import ('@ / views/layout/index.vue'), redirect:'/ clothing/tops' Meta: {title: "clothing, shoes and hats", showInbreadcrumb:true}, children: [{path:'tops', name:' coat', component: () = > import ('@ / views/clothing/children/tops/index.vue') Meta: {title: "upload", showInbreadcrumb:true}}, {path:'lower', name:' download', component: () = > import ('@ / views/clothing/children/lower/index.vue') Meta: {title: "under", showInbreadcrumb:true}}, {path:'shoes', name:' shoes', component: () = > import ('@ / views/clothing/children/shoes/index.vue') Meta: {title: "shoes", showInbreadcrumb:true}}]}, / / put at the end When none of the previous routes match, the route is matched and redirected to the root route {path:'*', redirect:'/', meta: {showInbreadcrumb:false}},]

Here I configure the route has the home page, electronic digital, clothing shoes and hats, these three are first-level routes, including electronic digital and clothing shoes and hats and secondary routing, in meta I customize the data, showInbreadcrumb is used to determine whether it is displayed in breadcrumbs, title is the name displayed in breadcrumbs

Get routing information

Template part:

/ src/views/layout/index.vue {{item.meta.title}} {{item.meta.title}} {{item_.meta.title}} {{item.meta.title}}

Js section:

Export default {data () {return {}}, computed: {/ / side navigation data routes () {/ / get all routing information from $router.options and filter return this.$router.options.routes.filter ((item) = > {return item.meta.showInbreadcrumb}) }, / / Bread crumb data breadcrumb () {/ / filter let matchedArr = this.$route.matched.filter ((item) = > {return item.meta.showInbreadcrumb}) based on the showInbreadcrumb field in the routing configuration meta / / because the home page is special, it must always be displayed on the first breadcrumb, if there is no home page routing information Manually add to the front if (matchedArr [0] .meta.title! = = 'home page') {matchedArr.unshift ({path:'/home', meta: {title: "home page" ShowInbreadcrumb:true}},)} return matchedArr },}}

Note: after getting the this.$route.matched, you cannot append it directly to the result and then filter it, otherwise the page will be messed up and an error will be reported. You should filter first, which will return a new array, and then judge to append the home page information.

Final effect

Thank you for reading this article carefully. I hope the article "how to achieve breadcrumb function in matched based on vue-router" shared by the editor will be helpful to everyone. At the same time, I also hope that you will support and follow the industry information channel. More related knowledge is waiting for you to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.