改写目录的原因
既然使用的是前后端分离的写法，就该彻底分离，我应该将后台管理页面也写在learn项目里面，现在这个结构就显得不合理了，进入后台管理页面应该是全新页面，现在的结构并不合理！
改写步骤
选区_018.png
1、新建一个admin目录
添加页面
admin.vue 用于管理后台路由
adminlogin.vue 用于后台管理员登录
home.vue 用于后台主页显示信息
mangeradmin.vue 用于管理管理员账户
mangeruser.vue 用于管理用户账户
mangerprods.vue 用于管理商品操作
mangersends.vue 用于管理用户发货
2、重新编写路由
打开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
}
]
})3、改写前端页面代码
这样重写路由之后会造成原来的导航菜单路由出错，所以需要改写前端导航的代码，主要是2个地方，更重要的是要改写前端结构
我的目的是要前端和后端页面是完全分离的，按原先的代码我直接将header.vue和footer.vue直接写在了APP.vue里面，这样的话会让我进入后端页面时也会渲染出头部和底部，这和我的想法是不一样的，所以首先改写APP.vue
1、打开APP.vue
将头部和底部抽离出来，放在home.vue里面
<template>
<div id="app">
<router-view></router-view>
</div></template><script>export default { name: 'app'}</script><style>#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;
}</style>2、打开home.vue
添加头部和底部
<template>
<div class="section">
<!-- 头部组件渲染 -->
<header-ly></header-ly>
<!-- 中间主要区域容器 -->
<!-- 添加一个element-ui内置的过渡动画 -->
<transition name="el-zoom-in-center">
<!-- 通过路由渲染不同内容的页面 -->
<router-view/>
</transition>
<!-- 底部 -->
<!-- 底部组件渲染 -->
<footer-ly></footer-ly>
</div></template><script>
// 导入组件import HeaderLy from '@/components/header'import FooterLy from '@/components/footer'export default { name: 'home', components: {
HeaderLy,
FooterLy
}
}</script>3、新建一个con-home.vue来存放主页也就是home页面的内容
con-home.vue
<template> <div class="container"> <h1>home</h1> </div></template>
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里面，再用来循环，这样就很灵活了，但稍微麻烦一点！
4、测试
前端页面
选区_019.png
头部的路由是正常的
选区_020.png
后端页面
选区_021.png
后端路由
选区_022.png
总结
还是经验太过欠缺了，要是一开始就有工程化思想的话，就不会有这些麻烦事了，接下来先把相关的后端页面和逻辑写好
github地址
learn：https://github.com/lyttonlee/learn
server： https://github.com/lyttonlee/express-server-for-learn
作者：思吾谓何思
链接：https://www.jianshu.com/p/a6ddffd30b81
随时随地看视频
