gitee仓库地址:

一、删除没必要的路由

1.删除没必要的路由

二、添加商品管理路由

1.在views中新建如下文件

2.基础结构搭建

3.路由配置

gitee仓库地址:

https://gitee.com/CMD-UROOT/my_project/commits/master

大家根据上传历史进行查找你需要的代码

目前的效果:

我们需要实现的效果:

一、删除没必要的路由

1.删除没必要的路由

所以有一些路由需要,有一些路由不需要,首页和登陆我们是需要的,其余的删除,我们先把运行的cmd打断一下,然后把没有用的路由删除

在views中:dashboard是首页,login是登陆,这两个保留,其余的删除

删除前:

删除后:

删除后我们是运行不了项目的,因为在路由配置中,我们还在使用那些被删除的路由

在router/index.js中:

只留下登陆,404,以及首页

这次就可以运行项目了

效果:

二、添加商品管理路由

1.在views中新建如下文件

文件名代表的路由:

product商品管理

---tradeMark品牌管理

---Attr平台属性管理

---Spu Spu管理

---Sku Sku管理

2.基础结构搭建

3.路由配置

在router/index.js中:

 {path: '/product',component: Layout,name: 'Product',meta: { title: '商品管理', icon: 'el-icon-goods' },children: [{path:'trademark',name:'Trademark',component:()=>import('@/views/product/tradeMack'),meta:{title:'品牌管理'}},{path:'attr',name:'Attr',component:()=>import('@/views/product/Attr'),meta:{title:'平台属性管理'}},{path:'spu',name:'Spu',component:()=>import('@/views/product/Spu'),meta:{title:'Spu管理'}},{path:'sku',name:'Sku',component:()=>import('@/views/product/Sku'),meta:{title:'Sku管理'}},]},

运行项目,查看效果:

我们发现真正项目中文字距离左上角有一个距离,我们这里没有,我们需要调整一下

我们审查元素知道这块区域是属于AppMain

我们看到AppMain的类名是app-main,由于作者写样式,把样式中的类名写错了,导致文字样式有问题,所以这里我们在styles里面的index.scss中修改类名就可以了

修改前:

修改后:

效果:内容和左上角就有距离啦

Vue后台管理系统项目(4)路由的搭建相关推荐

Vue后台管理系统项目——实现登录功能
文章目录登录功能 1. 登录业务流程 2. 登录业务相关技术点 3. 登录-- token 原理分析 4. 登录功能的实现(都记牢点) 登录页面的布局创建登录组件登录组件页面布局登录组件头部布 ...
Vue后台管理系统项目(2)后台管理系统模板介绍
目录 1.我们这里下载简洁版 2.新建一个空文件夹,把下载好的模板解压到该文件夹内 3.我们安装项目依赖 3.1安装完成后,我们打开项目 3.2运行项目运行后的效果: 4.模板中文件夹的作用 git ...
vue后台管理系统项目标准完整的目录开发架构
vue-cli@3.x 之前的版本构建的项目目录: vue-cli@3.x 之后的版本构建的项目目录: 两者区别: 安装创建命令: 3.x版本以前: npm i -g vue-clivue init ...
SpringBoot实现代码生成器——基于SpringBoot和Vue的后台管理系统项目系列博客（十）
系列文章目录系统功能演示--基于SpringBoot和Vue的后台管理系统项目系列博客(一) Vue2安装并集成ElementUI--基于SpringBoot和Vue的后台管理系统项目系列博客(二) ...
SpringBoot实现1对1、1对多、多对多关联查询——基于SpringBoot和Vue的后台管理系统项目系列博客（十八）
系列文章目录系统功能演示--基于SpringBoot和Vue的后台管理系统项目系列博客(一) Vue2安装并集成ElementUI--基于SpringBoot和Vue的后台管理系统项目系列博客(二) ...
SpringBoot和Vue集成Markdown和多级评论——基于SpringBoot和Vue的后台管理系统项目系列博客（二十三）
系列文章目录系统功能演示--基于SpringBoot和Vue的后台管理系统项目系列博客(一) Vue2安装并集成ElementUI--基于SpringBoot和Vue的后台管理系统项目系列博客(二) ...
SpringBoot实现分页查询——基于SpringBoot和Vue的后台管理系统项目系列博客（七）
系列文章目录系统功能演示--基于SpringBoot和Vue的后台管理系统项目系列博客(一) Vue2安装并集成ElementUI--基于SpringBoot和Vue的后台管理系统项目系列博客(二) ...
vue后台管理系统搭建
vue后台管理系统搭建前提安装node.js 控制台安装yarn:npm install -g yarn 查看yarn版本:yarn --version 注:-g表示的是全局安装淘宝镜像安装:n ...
正确姿势开发vue后台管理系统
项目地址 vue-admin-webapp 欢迎star,fork 前言相信许多人和我一样刚接触 vue 时看文档都很枯燥,看完 vue,还有 vueRouter .vuex .vue-cli.es ...

Vue后台管理系统项目(4)路由的搭建

gitee仓库地址:

一、删除没必要的路由

1.删除没必要的路由

二、添加商品管理路由

1.在views中新建如下文件

2.基础结构搭建

3.路由配置

Vue后台管理系统项目(4)路由的搭建相关推荐

最新文章

热门文章