vue項目,路由導航,側邊欄高亮,面包屑更新


問題:點擊側邊欄Menu中MenuItem,去到相應的頁面,並更新面包屑,點擊左上角返回,路由地址改變,面包屑更新,側邊欄項的高亮菜單改變

貼出部分代碼:

router路由部分:

        {
          path: '/library',
          name: 'library',
          component: library,
          meta: {
            requireAuth: true,
            title: '圖書館列表'
          }
        },
        {
          path: '/library/book-list',
          name: 'bookList',
          component: bookList,
          meta: {
            requireAuth: true,
            title: '圖書館列表 / 書刊列表'
          }
        },    

  

 

側邊欄side部分:

<Menu class="sidebar-menu" :active-name="activeNav" @on-select="handleSelect">
      <MenuItem name="/data-show">
        <i class="iconfont"></i>
        數據展示
      </MenuItem>
      <MenuItem name="/library">
        <i class="iconfont"></i>
        圖書館列表
      </MenuItem>
 </Menu> 
<script>
export default {
  name: 'sidebar',
  data () {
    return {

    }
  },
  computed: {
    activeNav () {
      return this.$route.path
    }
  },
  methods: {
    handleSelect (name) {
      this.$router.push(name)
    }
  }
}
</script>

  

  

面包屑部分:

<Breadcrumb class="breadcurmb">
          <BreadcrumbItem>{{breadNav}}</BreadcrumbItem>
 </Breadcrumb>

 

computed: {
    breadNav () {
      return this.$route.meta.title
    }
},

  

 

  


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM