admin框架二级菜单改为三级菜单的方法(2)

第三步:建立三级页面test-child.vue,testcaca.vue和三级路由的容器组件artical-publish-center.vue
artical-publish-center.vue结构如下图: 要有<rout-view>标签

admin框架二级菜单改为三级菜单的方法

其他两个三级页面vue随便写了:

admin框架二级菜单改为三级菜单的方法

第四步:到这里,容器可以实现期待已久三级菜单了,^_^. 在router里添加三级页面路由,router文件夹下router.js中:
加到appRouter中吧,可以放到title: '组件'的children数组中:

{ path: 'artical-publish', title: '用户配置', name: 'artical-publish', icon: 'compose', component: () => import('@/views/test/artical-publish-center.vue'), //引用三级页面的中间容器层 children:[ { path: 'testcaca', icon: 'ios-pause', name: 'testcaca', title: 'test4', component: () => import('@/views/test/testcaca.vue') }, { path: 'test-child', icon: 'ios-pause', name: 'test-child', title: 'test-child', component: () => import('@/views/test/test-child.vue') } ] }

最后保存,运行你的项目,看下三级菜单出来了吧:

admin框架二级菜单改为三级菜单的方法

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://www.heiqu.com/0df3b8643e18a7165b00f4d46f35d38b.html