Vue Toss-(2) write an unreliable crumb component _vue

Objective

This component is much simpler than the sidebar.
So what can you learn, a matter of opinion ha .... Look at the effect chart first

I encapsulate the page title and crumbs together. You don't have to communicate with components, or you have to listen to routing or dependency status to get

Puzzled answer:

Click on the parent (that is, the collapse menu) Why would you run to the submenu first

Because my first child route is a null path and is the default route

Click on the home page why will run to the first customer management

I wrote a redirect because of the root route.

function Point Support Separator Pass in, string format header synchronization changes

Implementation principle

The crumb text is not implemented by name of the named route (many problems),
But put it in Meta to implement a custom name
Traversal traversal traversal, compared to the contrast. Look at the rest of the note. It's not very troublesome. Code routing roughly (lazy loading)

Import Pagerouterview from "@/pages/admanage/admanage.vue";
Advertising management
Const ADADD = Resolve => require (["@/pages/admanage/adadd.vue"], resolve);
Const Adcheck = Resolve => require (["@/pages/admanage/adcheck.vue"], resolve);

Export default [
  {
    path: "Ad",
    Component:pagerouterview,
    meta: {
      breadcrumbname: "Advertising Management"
    },
    Children: [
      {
        path: "",
        Component:adadd,
        meta: {
          breadcrumbname: "Ad new"
        }
      {
        path: ' Check ',
        Component:adcheck,
        meta: {
          breadcrumbname: ' Ad audit '
        }
      }
    ]
  }
];

Breadcrumb.vue

<template> <div> <span class= "title" >{{title}}</span> <ul class= "breadcrumb" > <li v-for= "(item,index) in brumblist": key= "index" > <router-link:to= "Item.path" &GT;{{ITEM.META.BREADC rumbname}}</router-link> <span class= "separator" v-if= "index!== brumblist.length-1" >{{separator}}< /SPAN> </li> </ul> </div> </template> <script> export Default {creat
    Ed () {This.getbreadcrumb (); }, data () {return {title: ',///page title brumblist: '//Routing Collection}}, props: [' Sepa
        Rator '], methods: {Getbreadcrumb () {this.brumblist = this. $route. matched; this. $route. Matched.foreach (item, index) => {//To determine whether the parent route is an empty string or whether meta is the home page, direct replication path to the root directory///The following is the judgment route and The current traversal of the project is consistent, is the case of the value of the title to Item.meta.breadcrumbName = = ' Home '? Item.path = '/': this. $route. Path = = Item.path? This.title = Item.meta.breadcrumbName: ';
      }}, Watch: {$route () {this.getbreadcrumb ();
    }} </script> <style rel= "stylesheet/scss" lang= "Scss" scoped> ul {list-style:none;
    margin:0;
    padding:0;
    Clear:both;
    Li {float:left;
      } a {text-decoration:none;
      Color: #333;
        &:hover {color: #20a0ff;
      Text-decoration:underline;
    }}. separator {display:inline-block;
  Padding:0 5px;
    }. title {Display:inline-block;
    font-weight:700;
  font-size:20px;
    }. breadcrumb {float:right;
  padding:5px;

 } </style>

Summarize

Saw some harvest is my honor, see no gain that I also have no, wow haha.