Shulou(Shulou.com)05/31 Report--

In this article, the editor introduces in detail "how to achieve bread crumbs in vue". The content is detailed, the steps are clear, and the details are handled properly. I hope this article "how to achieve bread crumbs in vue" can help you solve your doubts.

The realization method of bread crumbs in vue is for your reference, such as what the following bread crumbs are:

Bread crumbs are used as an auxiliary and complementary navigation method (secondary navigation scheme), which can let users know where they are on the site or application and can easily return to the original location.

The most common style of bread crumbs is horizontal text links, separated by the greater than sign ">", which also implies their hierarchical relationship.

The principle of implementation:

1. Add meta (metadata) objects to the router configuration to store some custom content. For example, add the title variable to the implementation of breadcrumbs, which is the multi-level title displayed by breadcrumbs.

two。 Call watch to listen in the breadcrumb page, listen for the change of route, use this.$route.matched to get the configuration parameter object that matches all the fragments of the current route, return an array and store it in list

3. Use v-for to traverse the li tag, use list.meta.title as the {title information} of router-link,: to= "list.path", and dynamically render the list information to breadcrumbs

Specific code demonstration

Breadcrumb assembly:

Breadcrumb.vue

{{v.meta.title}} / export default {name: 'Home', data () {return {lists: []}}, / / listen for routing changes watch: {$route (to,from) {let matched = to.matched / / this.$route.matched / / this place is to fix that the first-level directory is the home page unchanged if (matched.length & & matched [0] .name! = "home") {matched = [{path:'/ home',name: 'home',meta: {title:' homepage'}},. Matched];}. An array name is a way to append an array var arr = [1je 2jue 3] var arr1 = [4je 5] var arr2 = [2m.. arr1] = = [2je 4je 5] / / this.lists = matched;}

Configure the routing file:

Router/index.js

{path:'/list', name:' list', meta: {title:' list display'}, component: () = > import ('.. / views/list/index.vue'), children: [{/ / Secondary routing / / path:'testA', path:'/list/testA', name:'testA' Meta: {title:' sublist A'}, component: () = > import ('.. / views/list/part1.vue')}, {path:'testB', name:'testB', meta: {title:' sublist B'}, component: () = > import ('.. / views/list/part2.vue')}]} I've read so far. This article "how to achieve breadcrumbs in vue" has been introduced. If you want to master the knowledge of this article, you still need to practice and use it. If you want to know more about the article, please follow the industry information channel.

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.