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
        }
    },
    

      

     

      

  • 相关阅读:
    django实现github第三方本地登录
    django扩展User模型(model),profile
    WSGI
    Linux查看配置文件中未被注释的有效配置行
    virsh 命令
    qemu-img命令
    python logging
    oslo.messaging
    集成kafka的身份认证(SASL/PLAIN)到kubernets环境中
    Helm基础知识
  • 原文地址:https://www.cnblogs.com/wangdashi/p/9801961.html
Copyright © 2011-2022 走看看