zoukankan      html  css  js  c++  java
  • 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
        }
    },
    

      

     

      

  • 相关阅读:
    Spring源码加载BeanDefinition过程
    设计模式之☞委派模式,通俗易懂,一学就会!!!
    SpringMvc 跨域处理
    寻找全排列的下一个数
    使用两个栈实现队列
    无序数组在排序后的最大相邻查
    判断一个数是否是2的幂
    最大公约数
    最小栈的实现
    js 原型与原型链
  • 原文地址:https://www.cnblogs.com/wangdashi/p/9801961.html
Copyright © 2011-2022 走看看