Vue.js+Element:路由

添加菜单(侧边栏)

/src/router/index.js:编辑此文件,需在文件中指定菜单名称(name),菜单路径(path),菜单重定向路径(redirect)。对于子菜单项,还要指定菜单的页面(component)

1、constantRoutes: 代表那些不需要动态判断权限的路由,如登录页、404等通用页面。
export const constantRouterMap = [{
  path: '/404',
  component: () => import('@/views/404'),
  hidden: true
}]
2、asyncRoutes: 代表那些需求动态判断权限并通过 addRoutes 动态添加的页面。
export const asyncRouterMap = [{
	path: '/table',
	  component: Layout,
	  redirect: '/table/table',
	  name: 'Table',
	  meta: {
	    title: 'Table',     //设置该路由在侧边栏中展示的名字
	    icon: 'table'      //设置该路由的图标
	  },
	  children: [{
	    path: 'table',
	    component: () => import('@/views/table/table/index'),    // Parent router-view
	    name: 'Table',
	    meta: {
	      title: 'Table'
	    }
	  },
	  {
	    path: 'tab',
	    component: () => import('@/views/table/tab/index'),
	    name: 'Tab',
	    meta: {
	      title: 'Tab'
	    }
	  }
	  ]
}]

注:
在 Sidebar 中已经帮你做了判断,当你一个路由下面的 children 声明的路由大于>1 个时,自动会变成嵌套的模式。如果子路由正好等于一个就会默认将子路由作为根路由显示在侧边栏中,若不想这样,可以通过设置在根路由中设置alwaysShow: true来取消这一特性。

hidden: true                   	当设置 true 的时候该路由不会再侧边栏出现 如401,login等页面(默认 false)
alwaysShow: true          		如果设置为true,则始终显示根菜单,无论其子路由的长度如何。
								如果未设置AlwaysShow,则子级下只能有一个以上的路由
								它将成为嵌套模式,否则不显示根菜单

参考文章:
https://panjiachen.gitee.io/vue-element-admin-site/zh/guide/essentials/router-and-nav.html#配置项

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值