新人求教：vue 面包屑点击左边栏目没有变化，刷新才有变化为什么

Question

1.vue 面包屑点击左边栏目没有变化，刷新才有变化为什么？

---

2.代码如下：

<template>
  <el-breadcrumb separator="/" class="breadcrumb">
    <el-breadcrumb-item>您所在的位置：</el-breadcrumb-item> 
    <transition-group name="breadcrumb">
      <el-breadcrumb-item v-for="(item, index) in breadList" 
                          v-if="item.meta.title" 
                          :key="item.path"
                          >
        <span v-if='item.redirect==="noredirect"||index==breadList.length-1'
              class="no-redirect">
              {{item.meta.title}}
        </span>
        <router-link v-else :to="item.redirect || item.path">
                {{item.meta.title}}
        </router-link>
        
      </el-breadcrumb-item>
    </transition-group>
  </el-breadcrumb>
</template>

<script>

export default {
  name: 'AdminPath',
  data () {
      return {
        breadList:null
    }
  },
  created() {
    this.getBreadcrumb()
  },
  wacth: {
    $route() {
      this.getBreadcrumb();
    }
  
    
  },
  methods: {
    getBreadcrumb() {
      let matched = this.$route.matched.filter(item => item.name);
      const first = matched[0];
      if(first && first.name !=='index'){
         matched=[{ path: '/index', meta: { title: '首页' }}].concat(matched)
      }
      this.breadList = matched
      

    }
  }  

 
 
}
</script>

<style scoped>
.breadcrumb{ height: 50px;line-height: 50px; margin-bottom: 0; border-radius: 0; color: #fff; margin-bottom: 20px;background-color: #d5ebfc; padding-left: 15px; box-shadow: 0 1px 2px 0 rgba(0,0,0,.05);}
.breadcrumb a{ margin: 0 10px;color: #fff;font-size: 14px;color:rgba(13,27,62,.65);}
</style>

---

3.路由

export default new Router({
  mode: 'history',
  routes: [

    {
      path: '/',
      name: 'Index',
      component: Index,
      children: [
        {
          path: '/home',
          name: 'Home',
          component: Home,
          meta: {title: '首页',}
        },
        {
          path: '/AdminUser',
          name: 'AdminUser',
          component: AdminUser,
          meta: {title: '管理员管理',}
        },
        {
          path: '/AdminRoles',
          name: 'AdminRoles',
          component: AdminRoles,
          meta: {title: '角色管理',}
        },
        {
          path: '/Language',
          name: 'Language',
          component: Language,
          meta: {title: '语言管理',}
        },
        {
          path: '/MediaLibrary',
          name: 'MediaLibrary',
          component: MediaLibrary,
          meta: {title: '媒体库',}
        },
        {
          path: '/Syste/SystemLogsIndex',
          name: 'SystemLogsIndex',
          component: SystemLogsIndex,
          meta: {title: '系统日志',}
        },
      ]
    },
    {
      path: '/login',
      name: 'Login',
      component: Login
    },
   
  ]
})

---

4.如图：

Answer 1

//breadList:null
breadList:[]
//this.breadList = matched
this.breadList.splice(0,this.breadList.length,...matched);