springboot整合vue05-处理不需要的导航栏
因为导航栏是遍历路由表来的,但有些不想出现,需要处理;
思路:
可以在路由,router目录下的index.js中,给每个路由添加一个参数show;
想显示的值为true,不想显示的值设为false;
然后在v-for遍历时,用v-if判断show的值来决定是否显示;
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 | 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> |
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步