vue-element-admin新增页面

如果熟悉 vue-router 的配置就很简单了。

首先在 @/router/index.js 中增加你需要添加的路由。

如：新增一个 excel 页面

{
  path: '/excel',
  component: Layout,
  redirect: '/excel/export-excel',
  name: 'excel',
  meta: {
    title: 'excel',
    icon: 'excel'
  }
}

TIP

仅仅这样不会有任何效果的，它只是创建了一个基于layout的一级路由，你还需要在它下面的 children 中添加子路由。

{
  path: '/excel',
  component: Layout,
  redirect: '/excel/export-excel',
  name: 'excel',
  meta: {
    title: 'excel',
    icon: 'excel'
  },
  children: [
    {
      path: 'export-excel',
      component: ()=>import('excel/exportExcel'),
      name: 'exportExcel',
      meta: { title: 'exportExcel' }
    }
  ]
}

这样侧边栏就会出现如图所示的 menu-item 了

TIP

由于 children 下面只声明了一个路由所以不会有展开箭头，如果children下面的路由个数大于 1 就会有展开箭头，如下面所示。如果你想忽视这个自动判断可以使用 alwaysShow: true，这样它就会忽略之前定义的规则，一直显示根路由。详情见路由和侧边栏

{
  path: '/excel',
  component: Layout,
  redirect: '/excel/export-excel',
  name: 'excel',
  meta: {
    title: 'excel',
    icon: 'excel'
  },
  children: [
    { path: 'export-excel', component: ()=>import('excel/exportExcel'), name: 'exportExcel', meta: { title: 'exportExcel' }},
    { path: 'export-selected-excel', component: ()=>import('excel/selectExcel'), name: 'selectExcel', meta: { title: 'selectExcel' }},
    { path: 'upload-excel', component: ()=>import('excel/uploadExcel'), name: 'uploadExcel', meta: { title: 'uploadExcel' }}
  ]
}

侧边栏就会出现如图所示的 submenu 了

http://www.vapsint.cn
http://www.moshii.cn
http://www.shamandaweiyu.cn
http://www.taiguangyinlou.cn
http://www.dexidunn.cn
http://www.marbooo.cn
http://www.hiago.cn
http://www.fioan.cn
http://www.yumengse.cn
http://www.yajuxuan.cn
http://www.eternelle.cn

原文地址：https://www.cnblogs.com/zjhcap/p/11520601.html