尚品汇后台项目之-项目路由的搭建

先把views里面不需要的路由进行删除

views是存放路由组件的文件夹

目前只留下了首页和登录路由组件

 但删除之后是运行不起来的，需要重新配置路由

在router/index.js文件夹中，分析代码

import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)

 是引入vue,以及vue路由，使用路由插件

/* Layout */
import Layout from '@/layout'

这块是整个项目中大的框架，后台结构的搭建：侧边栏，主页等

不管是写的几级路由组件，都需要在这个大的框架下

 {
    path: '/login',
    component: () => import('@/views/login/index'),
    hidden: true
  },

登录时一级路由，而且用到了路由懒加载

什么是路由懒加载

{
    path: '/',
    component: Layout,
    redirect: '/dashboard',
    children: [{
      path: 'dashboard',
      name: 'Dashboard',
      component: () => import('@/views/dashboard/index'),
      meta: { title: 'Dashboard', icon: 'dashboard' }
    }]
  },

这段代码的意思是先访问到/，即访问到地址中的/就会展示整个框架部分，立刻重定向到二级路由，特别是meta函数，title设置侧边栏的文字，icon：设置路由前的图标，可以使用已有的图标

下面的路由只留下404

将title改为首页

2.在开发路由之前，这些组件需要有

 在views中新建product/Attr,Sku,Spu,tradeMark四个路由组件

然后新建自己的路由，模仿已经写好的路由，当访问商品管理的时候，商品管理是一级路由，商品管理是在layout文件夹下，以后不管开发多少个组件，都在layout文件夹下

name需要注意，以后设置权限的时候能用到，

children里放的是二级路由，二级路由前面是没有标签的

{
    path: '/product',
    component: Layout,
    name: 'product',
    meta: { title: '商品管理', icon: 'el-icon-goods' },
    children: [{
      path: 'trademark',
      name: 'Trademark',
      component: () => import('@/views/product/tradeMark'),
      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里去改

 这里的样式在styles/index.scss中

注意，源代码这里写错了修改为

 这样就有边距了