新手小白第一次尝试后台管理项目关于子路由的使用

189 阅读1分钟

一、创建项目,配置插件

正常创建,常规配置

二、搭建页面

先写一个 layout 总布局文件夹,里面写上 index.vue 和 components文件夹,

components文件夹里主要是拆分出来的侧边栏组件、头部组件、主要内容组件

image.png

image.png

再给每个菜单列表创建文件夹,将相关页面放在一起

image.png

image.png

三、配置路由

image.png

image.png

四、ant-vue的菜单插件实现二级页面跳转

靠北啦,人家一直以为菜单插件自带跳转的事件,寻思怎么把插件自带事件和二级页面路径联系起来,研究半天发现还是要添加click事件啦!!!

image.png

image.png

image.png

  • 泪目了,改两个菜单导航插件样式找了半天

image.png

image.png

五、布局页面代码展示

index.vue

image.png

header.vue

image.png

aside.vue

image.png

content.vue

image.png

六、关于其他相关页面切换的思考

1.vant插件的标签页

image.png 效果神似后台管理页面的二级页面切换啊,但是没有用到router-view,不理解

image.png

直接在插件的内容部分替换上自己的页面就能实现切换效果

image.png

2.点击商品分类切换商品内容

这是我做第一个项目遇到的,将分类页面拆分成左右两块子组件

左侧组件导入分类数据

image.png

image.png

右侧组件导入相应分类的商品数据

image.png

image.png

左侧点击,右侧切换

image.png

image.png

image.png

这种实际不是页面的切换,只是同一个页面结构里数据的变换,因此也不涉及到router-view

七、关于vue-router和router-view

image.png

image.png

image.png