vue vue-router vuex element-ui axios的学习笔记（十七）改写learn目录

既然使用的是前后端分离的写法，就该彻底分离，我应该将后台管理页面也写在learn项目里面，现在这个结构就显得不合理了，进入后台管理页面应该是全新页面，现在的结构并不合理！

选区_018.png

添加页面
admin.vue  用于管理后台路由
adminlogin.vue 用于后台管理员登录
home.vue  用于后台主页显示信息
mangeradmin.vue  用于管理管理员账户
mangeruser.vue  用于管理用户账户
mangerprods.vue  用于管理商品操作
mangersends.vue   用于管理用户发货

打开route/index.js

import Vue from 'vue'import Router from 'vue-router'// 引入前端组件import Home from '@/components/home'import ConHome from '@/components/con-home'import Login from '@/components/login'import Regin from '@/components/regin'import Page404 from '@/components/404'import Products from '@/components/page/products'import FAQ from '@/components/page/FAQ'import Manger from '@/components/page/manger'import My from '@/components/page/manger/my'import Send from '@/components/page/manger/send'import MyHistory from '@/components/page/manger/history'import ProductList from '@/components/page/product/productlist'import ProductContent from '@/components/page/product/productcontent'// 引入后端管理组件import Admin from '@/admin/admin'import AdminLogin from '@/admin/views/adminlogin'import AdminHome from '@/admin/views/adminhome'import MangerAdmin from '@/admin/views/mangeradmin'import MangerProds from '@/admin/views/mangerprods'import MangerSends from '@/admin/views/mangersends'import MangerUser from '@/admin/views/mangeruser'Vue.use(Router)export default new Router({  // 配置路由
  routes: [    // 前段页面路由
    {      path: '/',      hidden: true,      type: 'client',      component: Home,      children: [
        {          path: '/',          hidden: true,          component: ConHome
        },
        {          path: '/products',          name: '商品',          class: 'el-icon-goods',          component: Products,          redirect: '/product/all',          children: [
            {              // 这里用的动态路由，需要一个冒号：
              path: '/product/:class',              component: ProductList
            }
          ]
        },
        {          path: '/product/:class/:productname',          hidden: true,          component: ProductContent
        },
        {          path: '/FAQ',          name: '文档',          component: FAQ
        },
        {          path: '/manger',          name: '工作台',          redirect: '/manger/my',          component: Manger,          hasChild: true,          children: [
            {path: '/manger/my', name: '我的信息', component: My},
            {path: '/manger/send', name: '发货管理', component: Send},
            {path: '/manger/history', name: '发货记录', component: MyHistory}
          ]
        }
      ]
    },    // 后端页面路由
    {      path: '/admin',      component: Admin,      type: 'admin',      hidden: true,      children: [
        {          path: '/admin',          component: AdminHome,          name: '管理首页'
        },
        {          path: '/admin/mangeprods',          name: '商品管理',          component: MangerProds
        },
        {          path: '/admin/mangesends',          name: '订单管理',          component: MangerSends
        },
        {          path: '/admin/mangeuser',          name: '用户管理',          component: MangerUser
        },
        {          path: '/admin/mangeadmin',          name: '管理员账户',          component: MangerAdmin
        }
      ]
    },    // 登录注册以及404页面路由
    {      path: '/admin/login',      hidden: true,      component: AdminLogin
    },
    {      path: '/login',      name: '',      hidden: true,      component: Login
    },
    {      path: '/regin',      name: '',      hidden: true,      component: Regin
    },
    {      path: '*',      hidden: true,      component: Page404
    }
  ]
})

这样重写路由之后会造成原来的导航菜单路由出错，所以需要改写前端导航的代码，主要是2个地方，更重要的是要改写前端结构

我的目的是要前端和后端页面是完全分离的，按原先的代码我直接将header.vue和footer.vue直接写在了APP.vue里面，这样的话会让我进入后端页面时也会渲染出头部和底部，这和我的想法是不一样的，所以首先改写APP.vue

1、打开APP.vue
将头部和底部抽离出来，放在home.vue里面

#app {  font-family: 'Avenir', Helvetica, Arial, sans-serif;  -webkit-font-smoothing: antialiased;  -moz-osx-font-smoothing: grayscale;  text-align: center;  color: #2c3e50;
}.container {  width: 100%;  max-width: 1366px;  margin: 80px auto;
}

2、打开home.vue
添加头部和底部

3、新建一个con-home.vue来存放主页也就是home页面的内容
con-home.vue

4、改写header.vue的菜单设置

因为我现在只要前端的路由，这里我想了2种方法

• 1、需要哪里的路由就找哪里的路由

选区_017.png

只需要将原来的

v-for="route in $router.options.routes"// 改为v-for="route in $router.options.routes[0].children"

这样的方法很简单，但是有一个弊端，我相当于把路由的顺序写死了，直接就找routes的第一个object，如果后期在routes里面又加入新的路由，这样很可能又需要改写一次，这样就很不灵活了，但很简单！！

• 2、这个只是思路，我没做

首先再header.vue被创建的时候将routes用filter或者foreach的办法找出需要的那部分路由,比如加个字段 type： 'client'来表明这是前端路由，然后就这些路由数据写在data里面，再用来循环，这样就很灵活了，但稍微麻烦一点！

前端页面

选区_019.png

头部的路由是正常的

选区_020.png

后端页面

选区_021.png

后端路由

选区_022.png

还是经验太过欠缺了，要是一开始就有工程化思想的话，就不会有这些麻烦事了，接下来先把相关的后端页面和逻辑写好

learn：https://github.com/lyttonlee/learn
server： https://github.com/lyttonlee/express-server-for-learn

作者：思吾谓何思
链接：https://www.jianshu.com/p/a6ddffd30b81