springboot整合vue05-处理不需要的导航栏

因为导航栏是遍历路由表来的，但有些不想出现，需要处理；

 

思路：

    可以在路由，router目录下的index.js中，给每个路由添加一个参数show；

    想显示的值为true，不想显示的值设为false；

    然后在v-for遍历时，用v-if判断show的值来决定是否显示；

 

router/index.js
const routes = [
  {
    path: '/',
    name: '图书管理',
    component: Index,
      show:true,
    redirect:'/p1',     //重定向，用来默认显示Page1
    children:[
      {
        path: '/p1',
        name: '图书列表',
        component: PageOne
      },
      {
        path: '/p2',
        name: '添加',
        component: PageTwo
      }
    ]
  },
  {
    path: '/p3',
    name: 'Page3',
      show: false,
    component: PageThree
  },
  {
    path: '/p4',
    name: 'Page4',
      show: false,
    component: PageFour
  }
]
 
App.vue
<el-submenu v-for="(item, index) in $router.options.routes" :index="index+''" v-if="item.show">
  <template slot="title"><i class="el-icon-message"></i>{{item.name}}</template>
    <!--index属性的值设为要跳转的路径-->
    <!--class的值动态添加，来实现点击变色，用$route.path取浏览器跳转地址，注意这里不是$router-->
    <el-menu-item v-for="(item2, index2) in item.children" :index="item2.path"
      :class="$route.path==item2.path?'is-active':''"
    >{{item2.name}}</el-menu-item>
</el-submenu>