脚本宝典收集整理的这篇文章主要介绍了vue vue-router vuex element-ui axios的学习笔记（十七）改写learn目录，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

改写目录的原因

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

改写步骤

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、需要哪里的路由就找哪里的路由

只需要将原来的

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、测试

前端页面

头部的路由是正常的

后端页面

后端路由

总结

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

github地址

learn：https://github.com/lyttonlee/...
server： https://github.com/lyttonlee/...

脚本宝典总结

以上是脚本宝典为你收集整理的vue vue-router vuex element-ui axios的学习笔记（十七）改写learn目录全部内容，希望文章能够帮你解决vue vue-router vuex element-ui axios的学习笔记（十七）改写learn目录所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。